How to make div expand to page width using css?

Question

I have a page with several divs, sort of like:

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

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

Answer 1

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

.second_one
{
  width: 100%;
}

Then, in your opinion, for the first you will do

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

For the second you would do

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

Answer 2

Div is the entire width of their default container.

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

Answer 3

, , , 100% . CSS reset 0. .

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}

"first_one" IE6, "text-align: center" . , node. , margin: 0 auto , .

div, .

"second_one", , . , , , , "second_one", .