CODEWITHSUNDEEP
htmlcsscss-float
user3812235
user3812235

Reputation: 37

Floated Divs instead of a table to achieve layout

I am currently using a table with 2 rows, the top row has 3 columns, the bottom row has 2 columns.

can somebody please tell me how I would go about doing this same layout with floated divs? As I actually have no idea.

Thanks in advance

Upvotes: 0

Views: 119

Answers (4)

chiapa
chiapa

Reputation: 4412

HTML

<div>
   <div class="float-left bd-black w33">
      A11
   </div>
   <div class="float-left bd-black w33">
      A12
   </div>
   <div class="float-left bd-black w33">
      A13
   </div>
</div>
<div class="clear-both">
   <div class="float-left bd-black w495">
      A21
   </div>
   <div class="float-left bd-black w495">
      A22
   </div>
</div>

CSS

.bd-black
{
    border: 1px solid black;
    box-sizing: border-box;
    overflow: hidden;
}

.float-left
{
    float: left;
}

.clear-both
{
    clear: both;
}

.w33
{
    width: 33%;
}

.w495
{
    width: 49.5%;
}

See if it suits you.

Fiddle here

Upvotes: 0

Narxx
Narxx

Reputation: 8299

Check out this example I've made for you: http://jsfiddle.net/ADQ8g/

html:

<div class="table-wrapper">
    <div class="row row1">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
    <div class="row row2">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
</div>

CSS:

.row:after {
    display: block;
    clear: both;
    content: "";
}

.row1 {
    background-color: red;
}
.row2 {
    background-color: green;
}
.row1 .column {
    width: 33.3333%;
}

.row2 .column {
    width: 50%;
}

.column {
    float: left;
    text-align: center;
}

Explanation: Each floating element needs to have a width set (since you're floating block elements which by default takes up 100% of it's container's width) in a way that allows several elements next to each other (50% for two elements, 33% for 3 elements, 25% for 4 elements and so on... you could also give specific sizes with pixels).

After you have done floating a "row" or elements, you need to clear the float with clear:both. I've used the :after pseudo element to save myself from creating an extra element with just the clear rule.

If you have more questions, feel free to ask :)

Upvotes: 0

Sid M
Sid M

Reputation: 4354

HTML

<div class="leftdiv">Column1</div>
<div class="centerdiv">Column2</div>
<div class="rightdiv">Column3</div>
<div class="leftdiv">Column4</div>
<div class="leftdiv">Column5</div>

css

.leftdiv { 
    background-color: red; 
    float: left;
}
.centerdiv { 
    background-color: orange; 
    float: none;
}
.rightdiv { 
    background-color: green; 
    float: right;
}

Fiddle: fiddle

Upvotes: 1

user1741851
user1741851

Reputation: 

<div class="row">
    <div class="width-3">Content</div>
    <div class="width-3">Content</div>
    <div class="width-3">Content</div>
    <div style="clear: both"></div>
</div>
<div class="row">
    <div class="width-2">Content</div>
    <div class="width-2">Content</div>
    <div style="clear: both"></div>
</div>

CSS is

.width-3 {
    float: left;
    width: 33.33%;
}
.width-2 {
    width: 50%;
    float: left;
}

If you need padding to content, add a new division inside width-2 or width-3 instead of adding padding or margin to width-2 or width-3

Upvotes: 0

Related Questions