Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Divs instead of table

Options
  • 25-11-2009 12:30am
    #1
    stupidusername
    Closed Accounts Posts: 14,762 ✭✭✭✭


    I want to make a div version of a two-row four-column table. Looked up several helpers online, but none seem to work for me.

    I've tried using divs, placing them beside each other, changing margin sizes, and width and used display:inline. But nothing will work. I got two divs to line up beside each other, but can't get a third or fourth one on the same line.

    Have double checked all margins and widths just in case someone might think thats it.

    Divs are in a container of 800px, and all percentages are ok.

    Really need help if someone knows about this stuff.
    Tagged:


Comments

  • Options
    #2
    johnny_rambo
    Registered Users Posts: 128 ✭✭johnny_rambo


    Can you post some of the html and css?


  • Options
    #3
    Zombrex
    Closed Accounts Posts: 25,848 ✭✭✭✭Zombrex


    stupidusername wrote: »
    I want to make a div version of a two-row four-column table. Looked up several helpers online, but none seem to work for me.

    I've tried using divs, placing them beside each other, changing margin sizes, and width and used display:inline. But nothing will work. I got two divs to line up beside each other, but can't get a third or fourth one on the same line.

    Have double checked all margins and widths just in case someone might think thats it.

    Divs are in a container of 800px, and all percentages are ok.

    Really need help if someone knows about this stuff.

    Use container divs, float your divs and use "clear" css to try and get it to line up correctly.

    This layout may "break" if you try and do stuff with it so it is more of an illustration than the answer. Have a look at how the floats and the clear:both CSS work and play around with that. Margins and padding values are going to mess up the layout so you really need to understand the principle here to get it to work on a more complicated layout. I'm not even sure if this is the best way to do this, or if doing something like this with DIVs is advisable.

    Also only tested this in Firefox. IE6 handles clear:both differently I think, so test in IE


    <html>
<body>
<!-- Container div for your "table" -->
<div style="width: 800px;">
    <!-- This is your first "row" -->
    <div style="width: 100%">
        <!-- This is your table element, one for each "column". 
             They are all floated left so they appear one after the other -->
        <div style="width: 23%; height: 50px; float: left; 
                    border: 1px solid #aaaaaa;">
            Row 1 Column 1
        </div>
        <div style="width: 23%; height: 50px; float: left; 
                    border: 1px solid #aaaaaa;">
            Row 1 Column 2
        </div>
        <div style="width: 23%; height: 50px; float: left; 
                    border: 1px solid #aaaaaa;">
            Row 1 Column 3
        </div>
        <div style="width: 23%; height: 50px; float: left; 
                    border: 1px solid #aaaaaa;">
            Row 1 Column 4
        </div>
    </div>
    <!-- This is your second "row". Notice the clear: both. This is important, 
         without it you may get elements from above falling into your second 
         row because everything is floating -->
    <div style="width: 100%; clear: both;">
        <div style="width: 23%; height: 50px; 
                   float: left; border: 1px solid #aaaaaa;">
            Row 2 Column 1
        </div>
        <div style="width: 23%; height: 50px; float: left; 
                    border: 1px solid #aaaaaa;">
            Row 2 Column 2
        </div>
        <div style="width: 23%; height: 50px; float: left; 
                    border: 1px solid #aaaaaa;">
            Row 2 Column 3
        </div>
        <div style="width: 23%; height: 50px; float: left; 
                    border: 1px solid #aaaaaa;">
            Row 2 Column 4
        </div>
    </div>
</div>
</body>
</html>


Advertisement