CODEWITHSUNDEEP
csshtml
denniss
denniss

Reputation: 17589

Div side by side

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?

Upvotes: 4

Views: 8424

Answers (6)

Justin Enayati
Justin Enayati

Reputation: 13

What i tend to use when dealing with multiple divs, is to simply use the 

.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 would produce two divs position wise to sit side by side, without having to use the float property.

hope that helps

Upvotes: 0

Drav Sloan
Drav Sloan

Reputation: 1562

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>

Upvotes: 7

Stephane Gosselin
Stephane Gosselin

Reputation: 9148

I made a simple fiddle for you to look at that would sort of give an idea.

http://jsfiddle.net/Us5dt/

Upvotes: 1

Peter Long
Peter Long

Reputation: 4012

Yes it is possible, Please read some materials about CSS. You could use float to make two divs side by side.

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176886

Make use of Float:left or Right attribute to make div side by side.

or following style(display) attribute help you to achieve 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

This might help you to understand : DIV TABLE

Upvotes: 1

Anand Thangappan
Anand Thangappan

Reputation: 3106

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>

Upvotes: 2

Related Questions