Geek Answers Handbook

Div side by side

So, I'm trying to put the div side by side, 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 title to span the entire width of the browser until the container is supposed to appear under the title. Navigation should be side by side with the content. Inside the content, I want the scream box to be contained in the content div, but cover the entire width of the content of the div. Is it possible?

+4
source share
6 answers

When organizing a div layout, my favorite trick is to use the borders on the containers to see visually where they “land” on the page, I added this to my sample code.

The trick to getting containers side by side is to use the css float property. This is added to the <div id='navigation'> css properties. Note that the following divs after the floating div will also float. Use the css clear property to put this div back into the inline line (so that it doesn't float). Take unnecessary css as an example and see how the footer jumps towards the content 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>
+7
source

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>
+2
source

Use the Float:left or Right attribute to make the div side by side.

or the following style attribute ( display ) will help you complete your task:

 * table – Make the element display like a table. * table-row - Make the element display like a table row element <tr>. * table-cell – Make the element display like a table cell element <td>. * table-row-group – Makes the element behave like a table body row group (tbody) element. * table-header-group – Makes the element behave like a table header row group (thead) element. * table-footer-group – Makes the element behave like a table footer row group (tfoot) element. * table-caption – Makes the element behave like a table caption element. * table-column – Makes the element behave like a table column (col) element. * table-column-group – Makes the element behave like a table column group (colgroup) element.

How to style div elements as tables

It may help you understand: DIV TABLE

+1
source

Yes, maybe read some CSS material. You can use float to make two divs side by side.

+1
source

I made a simple violin so you can take a look at this to give an idea.

http://jsfiddle.net/Us5dt/

+1
source

What I usually use when working with multiple divs is just to use

 .myDiv1{ position:absolute; top : 25px; (25 pixels away from the top) right: 25px; ( 25 pixels away from the right) } .myDiv2{ position:absolute; top: 25px; left: 25px; (25 pixels away from left) }

This will create two dividing positions to sit side by side without using the float property.

hope that helps

0
source

More articles:


All Articles