How do I make a div expand to the width of the page with css?

Question

I have a page with a couple of divs, sort of like this:

<div id="div_one">blah blah blah</div>
<div id="div_two">blah blah blah</div>

I want them to be centered horizontally, one after the other and for the second to expand to the width of the page.

Answer 1

Div's are the entire width of their container by default.

To center the contents horizontally, set "text-align: center;" on them. If they are in a container, also use "margin: auto" on the container, which will set the left and right margins to automatically center the div.

Answer 2

.first_one
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.second_one
{
  width: 100%;
}

Then in your view, for the first one you would do

<div class = "first_one">
...
</div>

For the second, you would do

<div class = "first_one second_one">
...
</div>

Answer 3

Keep in mind there are default margins on elements so it even though it's a 100% there could still be some gaps on the side. You can use some CSS to reset margins to 0 where needed.

Answer 4

body{ text-align: center; }

.first_one
{
  width: 600px; /* Can be any width */
  margin:0 auto;
}

/* Reset text-align for child content */
.first_one, .second_one{text-align: left}

In order to center "first_one" in IE6, you'll want to set 'text-align: center' on the parent element. In this case, I am assuming this is the body node. Also, margin: 0 auto does not work unless you specify a width.

You'll then want to set text-align left on the child divs so that the content within them is not centered.

You do not need to specify a width on "second_one" since block elements naturally expand to fill their parent containers. Additionally, by not setting the width, the browser will account for any padding, margin, and borders you may apply to "second_one" without breaking the layout.