CODEWITHSUNDEEP
csscss-float
WillingLearner
WillingLearner

Reputation: 7316

Floated Tableless Layout

Can anyone tell me how to execute this layout with floats and clears? Ive been trying for 2 days with total failure

alt text

Upvotes: 1

Views: 172

Answers (2)

Sotiris
Sotiris

Reputation: 40046

of course there are many solutions. One could be the following:

html

<div id="wrapper">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
  <div id="four">Four</div>
  <div id="five">Five</div>
  <div id="six">Six</div>
</div>

css

#wrapper {
    width:960px;
}
#one {
    width:100%;
    height:100px;
    background:#0C9;
}
#two, #three, #four, #five, #six {
    width:480px;
}
#two, #four, #six {
    float:left;
    height:100px;
}
#three, #five {
    float:right;
}
#three {
    height:200px;
}
#five {
    height:150px;
}
#two {
    background:#06F;
}
#three {
    background:#093;
}
#four {
    background:#699;
}
#five {
    background:#F06;
}
#six {
    background:#666;
}

live example: http://jsbin.com/iquyu5

Upvotes: 0

Jamie Dixon
Jamie Dixon

Reputation: 53991

Should be pretty simple, it's a basic 2 column layout with a header.

Something like this should work fine:

<div id="container">
 <div id="header">1</div>
 <div id="column1">
   <div>2</div>
   <div>3</div>
   <div>4</div>
 </div>
 <div id="column2">
   <div>5</div>
   <div>6</div>
 </div>
</div>

And some basic CSS

#column1, #column2{
width:45%;
float:left;
}

I've put a quick example here: http://jsfiddle.net/9DfRg/

Upvotes: 3

Related Questions