Div Moving It Self Down

[Asim]

Hello Again I got a three column layout set up (Left/middle/right). the left column is set to float left and right set to float right, with the middle set to margin left & right to auto. The problem is when I insert content in to the left and middle containers with right div tag keeps moving it self down. Very unusual, here is the code.

<div id="page_content">  <!--  START PAGE-CONTENT--> <div id="container_left">  <!--  START CONTAINER-LEFT--><div id="article_one" class="column"><h2>WOW CSS3! IMPOSSIBLE!</h2><p>lorem in quam varius posuere at sed leo. Pellentesque habitant morbitristique senectus et netus et malesuada fames ac turpis egestas. Phasellussapien mauris, varius ac posuere eget, sagittis quis odio. Donec nequefelis, hendrerit sed porttitor ut, molestie vitae orci. Nullam et suscipitjusto. Etiam velit enim, faucibus sodales lacinia nec, elementum ac nisi.Aliquam eget metus dolor, in commodo ligula. Suspendisse potenti. Maurispharetra mauris vel ligula placerat dapibus. Suspendisse at lacus ipsum, euultricies tortor. Suspendisse potenti. Vivamus id ligula ac ante rutrummolestie. Nullam varius mauris a nunc tristique convallis suscipit in orci.<br><br>Morbi nisi orci, convallis sit amet fringilla et, euismod non ligula.Vestibulum nec lacus at libero vehicula vehicula ultrices molestie neque.Sed pretium dui eu mauris viverra ut bibendum sapien suscipit. Proinvehicula pharetra enim id f</p></div><div id="article_two" class="column">In vitae ipsum sem, eu bibendum tellus.<br>Suspendisse id mauris augue, inmollis tortor.<br>Cras sit amet est luctus nulla dapibus vestibulum sed velmagna.<br><br>Pellentesque vitae magna et est tincidunt tincidunt quis euest.<br>Sed sit amet ipsum in nisl iaculis ornare.<br>Phasellus et massaeget nibh porta pretium.<br>Nam et lacus ut nisi vehicula porta.<br>Etiamquis felis quam, ut tristique turpis.<br><br>Donec vehicula erat eu liberosollicitudin hendrerit.<br>Suspendisse tristique lorem eget arcu variusconvallis.</div><div id="article_three"><p>t amet, consectetur adipiscing elit. Phasellus lacinia diam diam, atvolutpat nisl. Proin accumsan semper felis, a mattis diam iaculis quis.Fusce auctor, orci vel luctus tristique, nisi lorem placerat felis, nonsodales urna eros a nulla. Mauris in enim at odio ornare posuere eget aclectus. Fusce tellus turpis, mollis at lacinia at, egestas a felis.Suspendisse et nunc dolor. Nunc sit amet ipsum leo, eget accumsan risus.Nulla sollicitudin lacus justo. Phasellus vel mi et libero sollicitudinviverra vitae sed risus.</p></div></div><div id="container_middle">  <!--  START CONTAINER-MIDDLE--><div id="article_four"><br>Donec sed nisi nec nisi elementum faucibus ac et orci. Lorem ipsum dolorsit amet, consectetur adipiscing elit. Sed vel lectus ac sem fringillavolutpat a vel metus. Sed commodo augue at lectus condimentum aliquet.Vestibulum a dui quis enim luctus ullamcorper ut non urna. Morbi tinciduntbibendum enim in aliquam. Cras vestibulum viverra lacus ut commodo. Etiamnec nulla id libero euismod cursus ut nec sapien.Praesent arcu est,feugiat a imperdiet eget, suscipit a ante. Aliquam erat volutpat. Etiamfeugiat, velit non faucibus elementum, eros felis ultrices lectus, euadipiscing nulla erat eu metus. Pellentesque et ege<img alt="" src="Images/Saudi_Arabian_Airlines.jpg" ></div><div id="article_six"><p class="p_column">Donec sed nisi nec nisi elementum faucibus ac et orci. Lorem ipsum dolor sitamet, consectetur adipiscing elit. Sed vel lectus ac sem fringilla volutpat avel metus. Sed commodo augue at lectus condimentum aliquet. Vestibulum a duiquis enim luctus ullamcorper ut non urna. Morbi tincidunt bibendum enim inaliquam. Cras vestibulum viverra lacus ut commodo. Etiam nec nulla id liberoeuismod cursus ut nec sapien. Praesent arcu est, feugiat a imperdiet eget,suscipit a ante. Aliquam erat volutpat. Etiam feugiat, velit non faucibuselementum, eros felis ultrices lectus, eu adipiscing nulla erat eu metus.Pellentesque et egestas orci. Sed i</p></div></div><div id="container_right">  <!--  START CONTAINER RIGHT--><div id="article_five">Suspendisse id mauris augue, in mollis tortor.<br>Cras sit amet est luctusnulla dapibus vestibulum sed vel magna.<br><br>Pellentesque vitae magna etest tincidunt tincidunt quis eu est.<br>Sed sit amet ipsum in nisl iaculisornare.<br>Phasellus et massa eget nibh porta pretium.<br>Nam et lacus utnisi vehicula porta.<br>Etiam quis felis quam, ut tristique turpis<br></div><div id="aside_one"></div><div id="aside_two"></div></div>

Here is the CSS Code:

#page_content{padding-top: 20px;}#container_left{float: left;width: 333px;padding-top: 5px;padding-right: 5px;padding-left: 5px;border-right-style: groove;border-right-width: 1.5px;border-right-color: #555555;}#article_one{border-bottom:1.5px #555555 groove;}#article_two{border-bottom: 1.5px #555555 groove;padding-top: 10px;}#article_three{}#container_middle{margin-left: auto;margin-right: auto;width: 303px;border-right-style: groove;border-right-width: 1.5px;border-right-color: #555555;}#article_four{}#article_four img{width:298px;height:210px;padding-top:2px;}#container_right{float: right;width: 333px;}#article_five{}#aside_one{}

[niche]

I don't see any positioning in your middle div. Edit: Set your floaters first then your middle div with: margin:0 auto;It worked for me.Also, you may have an open div. Staggering your code will make that easier to check.

[Asim]

I don't see any positioning in your middle div.

It says there in the CSS #container_middle{margin-left: auto;margin-right: auto;width: 303px;border-right-style: groove;border-right-width: 1.5px;border-right-color: #555555;} Container_Middle{} I set margin left and right to auto to center it.

[niche]

margin-left: auto; and margin-right: auto;are not the same as margin:0 auto; Remember to set your middle div last.

[Ingolme]

It's a common practise to use margins to center an element.

[niche]

Thanks Ingolme. I've always used margin:0 auto; after floating right and left. How do you see Newbie's situation?

[Asim]

Thanks Ingolme. I've always used margin:0 auto; after floating right and left. How do you see Newbie's situation?

Does not actually work, I hate it when in my Developing program (Expression Web 4) shows div is being centred but in the browser it is to the left. I am using your margin:0 auto code. And to Ingolme how do you want me to centre it using margins? Isn't margin-left and right auto recommended?

[niche]

It works for me. Firebug says divs are in the right place. Edit: I gave your wrapper a width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript"></script><style type="text/css">#page_content{width:1500px;padding-top: 20px;} #container_left{float: left;width: 333px;padding-top: 5px;padding-right: 5px;padding-left: 5px;border-right-style: groove;border-right-width: 1.5px;border-right-color: #555555; }#article_one{border-bottom:1.5px #555555 groove; }#article_two{border-bottom: 1.5px #555555 groove;padding-top: 10px;}#article_three{ } #container_middle{margin:0 auto; width: 303px;border-right-style: groove;border-right-width: 1.5px;border-right-color: #555555;} #article_four{ } #article_four img{width:298px;height:210px;padding-top:2px; }#container_right{float: right;width: 333px;}#article_five{ } #aside_one{ }</style></head><body><!-- Div Moving It Self Down w3s forum 111217 -->  <div id="page_content">  <!--  START PAGE-CONTENT--> <div id="container_left">  <!--  START CONTAINER-LEFT-->  <div id="article_one" class="column">	<h2>WOW CSS3! IMPOSSIBLE!</h2>	<p>lorem in quam varius posuere at sed leo. Pellentesque habitant morbi	tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus	Sed pretium dui eu mauris viverra ut bibendum sapien suscipit. Proin	vehicula pharetra enim id f</p>  </div>   <div id="article_two" class="column">	In vitae ipsum sem, eu bibendum tellus.<br>Suspendisse id mauris augue, in	sollicitudin hendrerit.<br>Suspendisse tristique lorem eget arcu varius	convallis.   </div>   <div id="article_three">	 <p>t amet, consectetur adipiscing elit. Phasellus lacinia diam diam, at	 volutpat nisl. Proin accumsan semper felis, a mattis diam iaculis quis.	 viverra vitae sed risus.</p>   </div></div> <div id="container_right">  <!--  START CONTAINER RIGHT-->  <div id="article_five">	Suspendisse id mauris augue, in mollis tortor.<br>Cras sit amet est luctus	nulla dapibus vestibulum sed vel magna.<br><br>Pellentesque vitae magna et	est tincidunt tincidunt quis eu est.<br>Sed sit amet ipsum in nisl iaculis	ornare.<br>Phasellus et massa eget nibh porta pretium.<br>Nam et lacus ut	nisi vehicula porta.<br>Etiam quis felis quam, ut tristique turpis<br>  </div>  <div id="aside_one">  </div>  <div id="aside_two">  </div></div> <div id="container_middle">  <!--  START CONTAINER-MIDDLE-->  <div id="article_four">	<br>Donec sed nisi nec nisi elementum faucibus ac et orci. Lorem ipsum dolor	sit amet, consectetur adipiscing elit. Sed vel lectus ac sem fringilla	volutpat a vel metus. Sed commodo augue at lectus condimentum aliquet.	Vestibulum a dui quis enim luctus ullamcorper ut non urna. Morbi tincidunt	bibendum enim in aliquam. Cras vestibulum viverra lacus ut commodo. Etiam	nec nulla id libero euismod cursus ut nec sapien.Praesent arcu est,	<img alt="" src="Images/Saudi_Arabian_Airlines.jpg" >  </div>  <div id="article_six">	<p class="p_column">	  Donec sed nisi nec nisi elementum faucibus ac et orci. Lorem ipsum dolor sit	  amet, consectetur adipiscing elit. Sed vel lectus ac sem fringilla volutpat a	  vel metus. Sed commodo augue at lectus condimentum aliquet. Vestibulum a dui	  uis e nim luctus ullamcorper ut non urna. Morbi tincidunt bibendum enim in	  Pellentesque et egestas orci. Sed i</p>  </div></div> </div></body></html>

[Ingolme]

Thanks Ingolme. I've always used margin:0 auto; after floating right and left. How do you see Newbie's situation?

margin: 0 auto; is just a shorthand for margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; You can omit the top and bottom values because the horizontal centering only depends on left and right margins.

[niche]

I didn't know that. Thanks Ingolme.

[Asim]

Thanks guys..