Expanding Problem

[Asim]

Hey guys I got this issue, I got two div tags named content left/right inside another div tag called page_content. Now the problem is that content_right div tag is floated to the right and when I hit enter the page_content does not expand it self. I tried overflow hidden but it still does not work. here is HTML code:

<div id="page_content"> <div id="Content_right" >  </div> <div id="Content_left"> </div></div>

CSS for content_right

margin-right: 20px;width: 250px;overflow: hidden;float: right;

page_content has only one style that is background colour. and content_left has only the width and margin 20px property. I did try to float content_left but then page_content still does not expand it self...

[ShadowMage]

"when I hit enter the page_content does not expand it self" Are you referring to putting a new line in your source code? If so, that will not have any effect on the page (by default) as whitespace is collapsed to a single space. Meaning if you have a sequence of spaces, tabs, and new lines without any text characters mixed in, you will end up with a single space character on the web page.Try entering some actual text and see if the page_content div expands. EDIT: Oh, and you will need to have overflow set to either auto or hidden for the page_content div in order for floated elements to affect its size.

[Asim]

"when I hit enter the page_content does not expand it self" Are you referring to putting a new line in your source code? If so, that will not have any effect on the page (by default) as whitespace is collapsed to a single space. Meaning if you have a sequence of spaces, tabs, and new lines without any text characters mixed in, you will end up with a single space character on the web page.Try entering some actual text and see if the page_content div expands. EDIT: Oh, and you will need to have overflow set to either auto or hidden for the page_content div in order for floated elements to affect its size.

My div never expands in height when content is inserted in to, I got content but the main div is not expanding, I set overflow:auto but still nothing I even set position to fixed, relative, absolute, static none of them work.

[ShadowMage]

Can you post your full code? What browser are you using?

[Asim]

<div id="wrapper">HTML<header><br><br></header><nav><br><br></nav><div id="page_content"><div id="left_container"><article id="art_one"><br><br><br><br><br></article><article id="art_two"><br><br><br><br><br><br><br><br></article></div><div id="right_container"><aside id="asi_one"><br><br><br><br><br><br><br><br><br><br><br></aside></div><br><br><br><br><br><br><br><br><br><br><br><br><br></div><footer></footer></div>

The CSS code:

 #wrapper {margin-left: auto;margin-right: auto;width: 1000px;background-color: #888888;}#header{}/* NAVIGATION SETTINGS */#nav{text-align: center;font-size:14px;}#nav a:link{text-decoration:underline;color:black;}#nav a:visited{color:grey;}#nav a:hover{text-decoration:none;}/* END NAVIGATION */#page_content{position: static;overflow: auto;}#left_container{float:left;width:490px;;}#art_one{-webkit-column-count:3;-mox-column-count:3;column-count:3;-webkit-column-count:40px;-mox-column-count:40px;column-count:40px;}#art_two{}#right_container{float:right;width:490px;}footer {overflow: auto;}

In this one when I hit enter in article or any other div tag the footer does not move it self down..

[ShadowMage]

In this one when I hit enter in article or any other div tag the footer does not move it self down..

Please clarify what this means. If it means that, in your source code, you change:

<article id="art_one"><br><br><br><br><br></article>

to:

<article id="art_one"><br><br><br><br><br></article>

(For example) I already explained that whitespace collapses. New lines have little or no effect on the placement of elements on the page.I must say, though, that your extraneous usage of <br> tags disturbs me a little. You should use margins or padding to add space between elements.

[Asim]

Please clarify what this means. If it means that, in your source code, you change:

<article id="art_one">      </article>

to:

<article id="art_one">      </article>

(For example) I already explained that whitespace collapses. New lines have little or no effect on the placement of elements on the page.I must say, though, that your extraneous usage oftags disturbs me a little. You should use margins or padding to add space between elements.

I use margins but just to make this clear for my self when working I use <br/> tag. OK so I removed thetags and put written content there, the problem is that the div (art_one) expands but footer does not move it self down. It hangs in the middle..

[Asim]

Clear:both solved it! Thanks for your help dude, CSS can be annoying a lot..