Jump to content

DIV positioning


yaragallamurali
 Share

Recommended Posts

hi i have the following code

<div id="parent" >	  <div >apple</div>	  <div>cat</div></div>

and my requirement is, apple div and cat div should appear side by side(next to each other horizontally) without using absolute and float. why is it because when used absolute or float the parent div height becomes 0px. I want the 2 child div's appear side by side and also the parent div height should increase according to the child div's height. can any one help me solving this problem?

Edited by yaragallamurali
Link to comment
Share on other sites

one answer i found was

<div style="border:2px solid red;">        <div style="width:100px;height:100px;border:2px solid yellow;float:left;"></div>        <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>        <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>        <div style="clear:both"></div>  </div>

is there any other legitimate approach?

Link to comment
Share on other sites

<div style="border:2px solid red; overflow: hidden;">        <div style="width:100px;height:100px;border:2px solid yellow;float:left;"></div>        <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>        <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>  </div> 

Link to comment
Share on other sites

Hi dsonesuk, This is really nice. But i am not able to understand. The "overflow:hidden" should hide the over flown content of the div. But how is this working? when applied "overflow:hidden" how the div is growing dynamically according to its children? and also it is said that when "float" is applied it overrides or rips of the parent element properties. So how this all is working. A little explanation will help me understand the solution in a better way. kindly help me to understand this. Thanking you so much.

Link to comment
Share on other sites

The overflow: hidden element would only hide child elements that are larger, IF! giving a fixed size, or it is restricted by parent container it is within.The use of overflow:hide; is the normal method of correcting outer parent container not detecting floated child elements problem and is the one i use, you can use the clear: both; element method you have used but you are adding a extra empty element to markup, and also usually you would use height: 0; or maybe font-size:0; line-height:0;, to avoid a gap showing (which usually would be the height of font used).

Link to comment
Share on other sites

Ok thank you so much "dsonesuk". I have understood little bit. According to the definition on w3schools "overflow" deals with the overflown elements. But this is a new view. You are saying that it can be used to correct the parent container. The only question left is what properties does it correct. Only height or does it have impact on any other properties as well? Please don't think i am bothering you too much. I am trying to understand at my level best.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...