CODEWITHSUNDEEP
htmlcsslayoutcss-position
Mr.X
Mr.X

Reputation: 31345

What is the use of .container div in this W3Schools example?

I was trying to learn about CSS layout horizontal alignment and came across this example

body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 100%;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  background-color: #b0e0e6;
}
<div class="container">
  <div class="right">
    <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
  </div>
</div>

If we remove .container class or the entire div.container, the effect is none on Chrome, IE 10 and IE 8

What is the role of this .container in this example?

Upvotes: 0

Views: 2674

Answers (1)

Zak
Zak

Reputation: 7525

It is what it says A "container" ... some say "wrapper" .. it's for easier control of elements inside. I agree, if you have a single element, with the class right, it seems like it doesn't need to be there .. but lets say you want the entire page to take up 80% of display width, and THEN float your child element right -- A container is the easiest method to accomplish this. So it's not needed in your example per-se .. But it is ;-)

.container {
position: relative;
border: 1px #00FF00 solid;
width: 80%;
height:500px;
}

.right {
position: absolute;
right: 0px;
background-color: #b0e0e6;
border: 1px #FF0000 solid;
height: 50px;
width: 50px;
}

Fiddle

Upvotes: 1

Related Questions