HTML5 CSS Liquid Layout Issue

Question

I am trying to design a layout that looks something like this:

I want the entire layout to be designed using percentages instead of px. I think I am fairly close, but I am having issues with the margins or something. Here is my current code:

CSS

html, body {
    width: 95%;
    margin: 0 auto;
    height: 100%;
}

#header  {
      margin: 0;
      background-color: #000000;
      height: 5%;
      width: 100%;
}
#wrapper {
    height: 95%;
    margin: 0;
}

#content {
    width: 100%;
    overflow: hidden;
    height: 95%;
    margin: 0;
}

#left {
    margin: 0;
    width: 25%;
    height: 500px;
    float: left;
}

#right {
    float: left;
    width: 75%;
    height: 100%;   
    margin-right: 0%;
    display: inline;
}

.boxes {
    margin: .5%;
    width: 48%;
    height: 48%;
}

#topleft {
    float: left;
}

#topright {
    float: left;
    display: inline;
}

#bottomleft {
    float: left;
}

#bottomright {
    float: left;
    display: inline;
}

HTML

<html>
    <body>      
        <div id="header">

    </div>
    <div id="wrapper">
        <div id="content">  
                <div id="left">
                </div>
                <div id="right">
                    <div class="boxes" id="topleft"></div>  
                    <div class="boxes" id="topright"></div>

                    <div class="boxes" id="bottomleft"></div>
                    <div class="boxes" id="bottomright"></div>  
                </div>
        </div>
    </div>                   
    </body>
</html>

What else do I need to add to my CSS and or HTML code to get the layout I am looking for? Any help would be greatly appreciated.

The right margins of the right child divs are off, the bottom margins of the bottom child divs are not the same as the top. Also, for some reason there is a top margin above the left and right divs that I cant get rid of. I want the left and right divs directly under the header. — user3781214
– user3781214, Commented Oct 17, 2014 at 15:47

Joao Cunha · Accepted Answer · 2014-10-17 16:56:39Z

1

I guess now it's correct, take a look. I came back with the right width of 75%, 74% was wrong. But I used the box-sizing: border-box of css3 to make the width include the borders of #left and .box . Also, I've set the box width to 49% which completes the size needed along with the margin of .5%:

CSS

    html, body {
    width: 95%;
    margin: 0 auto;
    height: 100%;
    border: 1px solid;
}

#header  {
      margin: 0;
      #background-color: #000000;
      height: 5%;
      width: 100%;
      border: 1px solid;

}
#wrapper {
    height: 95%;
    margin: 0;
}

#content {
    width: 100%;
    #overflow: hidden;
    height: 95%;
    margin: 0;
    padding: 0px;
}

#left {
    box-sizing: border-box;
    margin: 0;
    width: 25%;
    height: 500px;
    float: left;
    border: 1px solid;
    padding: 0px;
}

#right {

    float: left;
    width: 75%;
    height: 100%;   
    margin-right: 0px;
    display: inline;
    padding: 0px;
}

.boxes {
    box-sizing: border-box;
    margin: .5%;
    width: 49%;
    height: 49%;
    border:1px solid;
}

#topleft {

    float: left;
}

#topright {
    float: left;
    display: inline;
}

#bottomleft {
    float: left;
}

#bottomright {
    float: left;
    display: inline;
}

edited Oct 17, 2014 at 16:56

answered Oct 17, 2014 at 16:08

Joao Cunha

7724 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3781214 Over a year ago

Yes that is very close! The only other thing is that I want the four box divs to take up the remaining width of the header - left div (left and right margins of the right div should be equal so the child divs look centered).

Joao Cunha Over a year ago

I've edited the solution, see if it reaches your goal.

Quin · Accepted Answer · 2015-02-10 11:29:37Z

If it was me, I'd make it into a grid system, and have them nested.

Something like:

<header class="section group">
    <div class="col span_1_of_1">Header (this HTML is rather redundant)</div>
</header>
<section class="section group">
    <aside class="col span_1_of_10">Left</aside>
    <main class="col span_9_of_10">
        <section class="section group">
            <div class="col span_1_of_2">Top Left</div>
            <div class="col span_1_of_2">Top Right</div>
        </section>
        <section class="section group">
            <div class="col span_1_of_2">Top Left</div>
            <div class="col span_1_of_2">Top Right</div>
        </section>
    </main>
</section>

The CSS is based on percentage, including percentage for the margins.

Check it out

Collectives™ on Stack Overflow

HTML5 CSS Liquid Layout Issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related