help with positioning

[CyberShot]

I am building a site and ran into a problem. I have my header set up and the site wrapped with a wrapper. All is good. I needed to build 3 columns for the content and decided to do this using absolute positioning. I have them positioned exactly where I want, everything is good The problem is that the wrapper has colapsed under the absolute positioned columns. So any new content floats underneath the colums rather than below them as in normal flow of content. I know how to float the content and build the columns that way, but I was hoping for a solution to this so I could keep it this way since it's perfect. Any suggestions?

 

my columns

#content #column1	{
margin-left: 15px;
position: absolute;
width: 300px;

}

#content #column2	{
position: absolute;
margin-left: 15px;
width: 300px;
left: 300px;

}

#content #column3	{
position: absolute;
margin-left: 15px;
width: 400px;
left: 600px;

}

 

I have position relative on the wrapper div

[haku]

You can't do this using absolute positioning. Absolute positioning takes the elements out of the document flow, meaning that other elements that are still in the document flow do not see, recognize, or interact with the absolutely positioned elements anymore.

[ngreenwood6]

Why not just remove the absolute positioning and float each element to the left? If you have a container that is 900px and you have 3 containers that are 300px, you can float them all to the left and set their width to 300px and they should all stay inline with each other. That is assuming there is not margins or padding on some elements. Just to be safe you could set them to 250px just to make sure.

[CyberShot]

I explained why in my post

[ngreenwood6]

Is there a url to view?

[CyberShot]

well, I thought about some of the explanations and realized that floating was the way to go. So I ended up doing that it and it's working fine. Now I am trying to figure out why my nav won't work.

[ngreenwood6]

It is possible to do it by using absolute positioning but its a little more work. Thats why I was asking if there was a url, but using floats is an easier solutino.

[CyberShot]

here is a different question you can answer why you are here. Why would padding push a nav div down? I am trying to get my links aranged and every time I put padding on the nav div, it pushed the div below it down which makes a white line. This should not happen

[ngreenwood6]

Without seeing what ur talking about it's hard to tell. My best suggestion is to use firefox with the firebug plugin to trouleshoot

[CyberShot]

that's what I have been doing. I think it's just to long since I coded a page. My skills are getting cold. I was having trouble positioning the nav. I coulnd't figure out why padding was pushing the divs apart. Margin should do that but not padding. I ended up using relative positioning to put the nav in place

 

#nav	{

background:url(../images/nav.png) repeat-x;
height: 46px;
width: 100%;
}

#nav ul li	{
position: relative;
display: inline;
list-style: none;
font-weight: bold;
list-style-position: inside;
left: 30px;
}

#nav li a	{
position: relative;
top: -20px;
color: #fff;
text-decoration: none;
padding: 0 20px  0 20px;
text-align: center;
}

 

<div id="header">
	<div id="logo">

	</div><!--END LOGO-->
</div> <!--END HEADER-->

<div id="nav">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><img src="images/navLine.png" alt="" width="2" height="46"  /></li>
		<li><a href="About.html">About</a></li>
		<li><img src="images/navLine.png" alt="" width="2" height="46"  /></li>
		<li><a href="portfolio.html">Portfolio</a></li>
		<li><img src="images/navLine.png" alt="" width="2" height="46"  /></li>
		<li><a href="services.html">Services</a></li>
		<li><img src="images/navLine.png" alt="" width="2" height="46"  /></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
</div><!--END NAV-->
[code]

firebug was showing the padding below the nav div which was pushing the content div down which allowed the white background from the browser to show. the padding made a space between the nav div and content div. couldn't figure out why

[FaT3oYCG]

i find that it makes things easier if you split your site up e.g. a nav at the top if you have one, then a logo area if you have one of those and then the content followed by the footer.

 

to see what im talking about look at my site: http://gaming-network.ath.cx/site/

 

the css style sheet is located at: http://gaming-network.ath.cx/site/template/style.css

 

i need to change some of my links because they are relative at the moment which sucks and some of my styles havent been added to the style.css but are simply styles on the elements that need them but i hope to change that after i have got a few more features set up.

[haku]

When items are floated, if they cannot fit in the space provided, they drop down to the line below. So if you are adding padding, that adds to the width of the element (in IE I think not FF. Or the other way around). So the width will be the width + the padding. If this makes the width more than the space for the nav, it will drop down below the other content.

[FaT3oYCG]

It happens in Firefox, don't know about IE but using the methods that I use it works on all of the browsers that I have tested it on.

[haku]

I wasn't commenting on your post one way or the other (I didn't even look at your links), I was just giving the OP some info to know why the problem was probably happening.

[FaT3oYCG]

I wasn't saying that your informatin wasnt valid, just adding to the fact and stating that the case you suggested happens in firefox.