AERO AERO - 6 months ago 22
CSS Question

HTML/CSS Layout Inquiry

I was wondering how to get my HTML/CSS to follow this particular format:

http://i.imgur.com/o5h1GFA.jpg

I've already attempted to search for the code online, but it would not work for me whenever I tested it.

Any help would be greatly appreciated!

Regards

Answer Source

This is your basic HTML inside the body tags:

<div id="navbar">
</div>
<div id="textbox">
</div>
<div id="lmodule">
</div>
<div id="rmodule">
</div>

This is your CSS in your dedicated CSS file.

#navbar {
width: 100%;
height: auto; (or if you have specific height put it)
(position: fixed; - use this if you want your menu to stay with the viewer upon moving up/down the page)
}
#textbox {
width: 60%; (based on your image I believe it is around 60%)
height: auto;
position: relative;
margin: 0 auto;
}
#lmodule {
display: inline-box;
width: 27%;
height: auto;
float: left;
margin: 0 3% 0 auto;
}
#rmodule {
display: inline-box;
width: 27%;
height: auto;
float: right;
margin: 0 auto 0 3%;
}

This is at least how I do it. I use % based values, because it is easy to make media queries this way.