Home/ Questions/Q 6059603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:43:48+00:00

So I have been trying to put a div side by side here but

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">&nbsp;</div>
    </div>
</div>
<div id='footer'>footer</div>
</body>
    • 0