Forums

danielr0y

Hello all. Just a quick, but important question.

When a child div's width is set to be greater than its parent, the child div will extend ('overflow') out of the parent.


#parent{
	width: 10px;
	float: left;
	overflow: visible;
}
#child{
	width: 1000px;
	height: 100px;
}

<div id=\"parent\">
	<div id=\"child\"></div>
</div>

My question is, How can I utilise this concept having the childs with at 100%?
I obviously tried setting the childs with at 100% but no overflow occured.

Thanks.
Daniel Roy

apostrophe

Not really sure what you are trying to achieve. Would it not be simpler to just absolutely position #child?

danielr0y

I am reordering the divs for seo purposes, so yes absolute possitioning will work but i was still hoping to get a solution to this.
I'll explain further.
divs are loaded 'first' first and 'second' second in html but are displayed 'second' first and 'first' second.


#first{
   width:100%;
   margin-top:300px
   float:right;
#second{
   width: 0px;
   height:300px;
   float: left;
   overflow: visible;
}
#child{
   width: 100%;
   height: 100px;
}

<div id=\"first\"></div>
<div id=\"second\">
 <div id=\"child\"></div>
</div>

AshtonSanders

width: 100% does not mean 100% of the screen size, it means 100% of the available space (normally the parent width)

danielr0y

"AshtonSanders" said:
width: 100% does not mean 100% of the screen size, it means 100% of the available space (normally the parent width)

ah, so it does. Thanks. I'll scrap this idea and stick with absolute.

treehouse : what would you like to learn today?

Forums

overflow div at 100%