Menu
So I have been trying to put a div side by side here but I have run out of options.
<div id='body'>
<div id='header'>
</div>
<div id='container'>
<div id='navigation'></div>
<div id='content'>
<div id='shoutout-box'></div>
</div>
</div>
</div>
I want the header to span the entire browser's width while the container is suppose to show up below the header. The navigation should be side-by-side with the content. Inside the content, I want the shoutout-box to be contained in the content's div but span the entire width of content's div. Is this possible?
539
When organising div layout my favourite trick is to use borders on the containers to see visually where they "land" on the page, I've added this in my example code.
The trick of getting containers side by side is to use the css float property. This has been added to the <div id='navigation'> css properties. Note that following divs after a floated div will also float. Use the css clear property to put that div back "inline" (make it not float). As an example, take out the notneeded css and watch how the footer jumps to the side of the contents container).
<head>
<style type="text/css">
body { background: #dddddd; }
div#body { border: 1px solid red; }
div#container { border: 1px solid black; }
div#navigation { border: 1px solid green; float: left; }
div#content { border: 1px solid blue; float: left; width: 900px; }
div#shoutout-box { border: 1px solid yellow; }
div#notneeded { clear: left; }
</style>
</head>
<body>
<div id='body'>
<div id='header'>Header</div>
<div id='container'>
<div id='navigation'>Nav here</div>
<div id='content'>
<div id='shoutout-box'>Shoutout box</div>
Content Div contents here
</div>
<div id="notneeded"> </div>
</div>
</div>
<div id='footer'>footer</div>
</body>
Add div style float:left;
Code:
</div>
<div id='container'>
<div id='navigation' style="float:left;padding:10px">First</div>
<div id='content' style="float:left;padding:10px">
<div id='shoutout-box'>Second</div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
