CODEWITHSUNDEEP
csshtml
ObiWanKenobi
ObiWanKenobi

Reputation: 14902

Placing DIVs using CSS

Say I have the following DIVs:

<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>

How can I use CSS to place the sidebar DIV to the right of the main DIV, and set it to, say, 20% of the total width?

I'd also like to have some margins between the four DIVs, so that the layout doesn't look too cramped.

Would like it to work in "all" browsers, including that bastard IE6...

Upvotes: 4

Views: 1180

Answers (6)

ObiWanKenobi
ObiWanKenobi

Reputation: 14902

I will answer my own question with a link to this article which was exactly what I was looking for:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Upvotes: 0

John Lewis
John Lewis

Reputation: 722

It's very very important that you set the doc type to strict, ala thusly:

If you do this, you wont need to clear your CSS (with a few exception) and can simply use the correct box models.

Upvotes: 0

Chris Doggett
Chris Doggett

Reputation: 20777

<div id="top">Page header</div>
<div id="main">
    <div id="content">Main content</div>
    <div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>


#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }

Upvotes: 0

cletus
cletus

Reputation: 625347

Try:

html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }

It's important for this kind of thing to use a reset CSS (there are others) as different browses have different default values for things like borders, margins and padding.

Upvotes: 0

knittl
knittl

Reputation: 265817

use floats, negative margins and padding.

you can find good tutorials on http://alistapart.com about page layouting (i really recommend the holy grail) and it also deals a lot with cross-browser problems

http://www.alistapart.com/articles/holygrail

Upvotes: 0

Robert Greiner
Robert Greiner

Reputation: 29752

put main and sidebar in the wrapper, you can set the size/location of wrapper and preserve your layout.

#top {
  /* top stuff */
}
#wrapper {
  width: 800px;
  margin: 0px auto; /* centers on page */
}
#main {
  float: left;
  width: 80%;
  margin-right: 10px;
}
#sidebar {
  float: left; /* by floating left here you have a greater control over the margin */
  width: 20%;
}
#bottom {
  /* bottom stuff */
}

Upvotes: 3

Related Questions