3 questions about positioning

[setmoa]

Hi again Novice here trying to learn, please could you guys help me. I have 3 problems/questions regarding my work in progress test site that I'm doing (please excuse the colours its just so that I can see the divs):

1. Navigation menu - I want the menu centred but the menu links closer together but am unsure how to do this?
2. I did have my main three columns set as auto height but then when I put too much text in or changed the font size my left footer section moved up into the main content section. I have now set a height to all 3 columns, however, if I wanted it so that I could put more text or images in any of the 3 main columns and they all just expand to fit and are level without moving anything else - is that possible? and how do I do that?
3. Left hand main column with images: I would like to have it so that my wording for each image is central (in height) to each of the images and also that all the wording lines up vertically a bit away from the images - how do I do this?

I have attached my files. Sorry for all the questions Ally

index.html

main.css

[Krewe]

1) You are centering it the hard way! Haha, try this:

#nav{float:left;height:35px;width:100%;background-color:#06F;} #nav ul{width: 600px;margin: 0px auto;color:#FFF;}#nav li{float: left;width: 150px;font-size:16px;padding: 0 0 0 0px;text-align: center;}

Then change your HTML nav code to this:

<ul><li><a href=" " title=" "></a>home</li><li><a href=" " title=" "></a>services</li><li><a href=" " title=" "></a>prices</li><li><a href=" " title=" "></a>contact</li><div style="clear:both;"></div></ul>

Now what did I do? I kept the CSS for #nav the same, but for the ul I added a fixed width and added margin: 0px auto;. That makes it so the ul will center itself in the #nav div. (The width of the ul has to be fixed to a certain width for the margin to work.) Then for the li in the css I just made the width equal to 150px (600px / 4 = 150px) and made the text center itself. The div after the <li>'s in the html makes it so the floated div elements are now recognized/in relation to the ul container they are in. 2) To fix this you just have to edit your html a bit and add a div. First, take your ending </div> for the #main and end #main right before you start the footer. Then before the ending #main div tag, add another empty div tag that clears the float again, like we did with the nav.

<div id="main"><div id="leftside">  <p> </p>  <p><img src="images/computer-image.png" width="99" height="62" /> No Fix No Fee</p>  <p> </p>  <p><img src="images/settings-image.png" width="89" height="78" /> Flat Rate Fee<br /></p>  <p> </p>  <p><img src="images/network-image.png" width="70" height="73" /> Newton Abbot & Torbay</p>  <p> </p>  <p> </p>  <p> </p></div> <div id="centre"><p>Lorem ipsum dolor sit amet, aeterno recusabo assentior sit cu, no tamquam omittam pro, pro nostrud commune interpretaris te. Nostro virtute usu no, mea at ubique patrioque disputationi. Sit no scripta honestatis. Mea soluta animal assentior te. Quo elit intellegat ex, aeque qualisque usu ei. Sea duis phaedrum cu. Sed alii porro integre in, et graece accumsan has, an nec assum option delicatissimi.Ex pri liber ponderum consequat. Ullum suavitate nam id, et sit reque eligendi, eos ut sumo novum cotidieque. Eirmod detraxit persequeris vim ut, sed postea theophrastus in, pro ea denique voluptaria scribentur. ###### diceret explicari et, sed te nemore blandit.Vis ad nonumy molestie verterem, eam id salutatus incorrupte. Saepe vulputate cu ius, quis ceteros mnesarchum quo in. Malorum corpora et his, ei sea decore recteque cotidieque. Eum accusam menandri et, sea an eius putent regione, nibh meliore accusam quo ut. An malis aliquid labores est, sea et oratio accusam. At vis amet nobis dolorum, senserit delicatissimi no est, mea debitis alienum iracundia ut. Has adhuc maiestatis te, habeo fuisset at per, mel an commune suavitate contentiones.</p></div> <div id="rightside"></div><!--rightside--><div style="clear:both"></div></div><!--main-->

3) To do this we have to mess with the html a bit, take the img tags out of the <p> tag, put an empty div with the clear and margin after each <p> tag to clear the floats we are going to put, and take out the 's.

<div id="leftside">  <img src="images/computer-image.png" width="99" height="62" /><p>No Fix No Fee</p>  <div style="clear:both; margin-bottom: 10px;"></div>  <img src="images/settings-image.png" width="89" height="78" /><p>Flat Rate Fee</p>  <div style="clear:both; margin-bottom: 10px;"></div>  <img src="images/network-image.png" width="70" height="73" /><p>Newton Abbot & Torbay</p>  <div style="clear:both; margin-bottom: 10px;"></div></div>

Then in the css we just have to add this!

#leftside img{float: left;height: 50px;width: 50px;margin-right: 10px;}#leftside p{float: left;line-height: 50px;margin-left: 10px;}

Now, that fixes all of your issues, however I would make a class for the clear: both; empty divs to make things more systematic and clean. But that is up to you! If you have any questions, ask.

Edited April 7, 2013 by Krewe

[setmoa]

Hi Krewe Thank you so much for taking the time to address all 3 of my points and also giving the code along with explainations, it was incredibly helpful. Ally