CODEWITHSUNDEEP
htmlcss
me72921
me72921

Reputation: 173

A specific layout using float

Ii's been a while since I programmed a website and it seems that I have forgot some basic concepts about FLOAT!

How to make this layout in divs using FLOAT

Can anyone help making this (on picture) layout using 4 divs and FLOAT?

I have tried this:

    <header>
            <div id="fill_left"></div>
            <div id="top"></div>
            <div id="fill_right"></div>
            <div id="bottom"></div>  
    </header>

And CSS:

header {
width: 100%;
height: 9em;
background-color: lightblue;
}

#fill_left{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}

#top{
width:80%;
height: 50%;
background-color: lightgray;
float: left;
}
#bottom{
width:80%;
height: 50%;
background-color: lightseagreen;
float: left;
}

#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}

And of course they're all inside a wrapper{ width: 100%, height: 138px}

Thanks

Upvotes: 1

Views: 57

Answers (2)

Anonymous
Anonymous

Reputation: 10216

You could do it by using an extra div to warp div-2 and div-3 by set float: left;

JSFiddle - DEMO or Full Screen View

HTML:

<div id="div-p">
    <div id="div-1"></div>
    <div id="div-c">
        <div id="div-2"></div>
        <div id="div-3"></div>
    </div>
    <div id="div-4"></div>
</div>

CSS:

body {
    margin:0;
}
#div-p {
    width: 100%;
    height: 138px;
}
#div-c {
    width: 90%;
    height: 138px;
    float: left;
}
#div-1 {
    width: 5%;
    float: left;
    height: 100%;
    background: red;
}
#div-2 {
    width: 100%;
    height: 50%;
    background: green;
}
#div-3 {
    width: 100%;
    height: 50%;
    background: blue;
}
#div-4 {
    width: 5%;
    float: left;
    height: 100%;
    background: black;
}

Solution 2:

You could also do it by using display: inline-block; and set font-size:0px; to #div-p for remove the white-space and then set font-size: 16px; (i.e 16px = 1em) to child elements.

JSFiddle - DEMO or Full Screen View

body {
    margin:0;
}
#div-p {
    width: 100%;
    height: 138px;
    font-size: 0px;
}
#div-c {
    width: 90%;
    height: 138px;
    display: inline-block;
    font-size: 16px;
}
#div-1 {
    width: 5%;
    display: inline-block;
    height: 100%;
    background: red;
    font-size: 16px;
}
#div-2 {
    width: 100%;
    height: 50%;
    background: green;
}
#div-3 {
    width: 100%;
    height: 50%;
    background: blue;
}
#div-4 {
    width: 5%;
    display: inline-block;
    height: 100%;
    background: black;
    font-size: 16px;
}

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

That simple Notice the order: http://jsbin.com/liqulo/1/edit

  <div id="fill_left"></div>
  <div id="fill_right"></div>    

  <div id="top"></div>
  <div id="bottom"></div>

CSS:

#fill_left,
#fill_right{
  width: 5%;
  height: 100%;
  background-color: lightcoral;
}
#fill_left{  float: left;  }
#fill_right{ float: right; }   /* and notice Float Right */

But if I were you I would do it even simpler: http://jsbin.com/liqulo/2/edit

<header>       
  <div class="cont" id="top"></div>
  <div class="cont" id="bottom"></div>
</header>


header {
  width: 100%;
  height: 9em;
  background-color: lightcoral;
}
.cont{
  width:90%;
  height: 50%;
  margin:0 auto;
}

Upvotes: 1

Related Questions