...

View Full Version : Nested 3 column div layout. can't get right floated element inside parent?



valentine
02-21-2011, 05:50 PM
I have a nested 3 column as a header menu on my site and I just can't get the right floated column to stay in its parent container. I don't know what I'm doing wrong. Can someone shed some light? Many thanks.

Here is the code



<div id="container">

<div id="title"> Title </div>

<div id="menubarcontainer">

<div id="left"> Left</div>
<div id="middle"> Middle </div>
<div id="right"> <a href="indexblog.html">Right</a></div>
</div>

</div>

and here the relevant style snippet




#container {
position:relative;
width: 989px;
padding: 20px 20px 20px 20px;
margin-left:auto;
margin-right:auto;
height: 100%;
background-color:white;
overflow:hidden;
}


#thumbswrap {
width: 989px;
position:relative;
margin-top:40px;
height: 1000px;
}



#title {
width: 989px;
height: 38px;
top: 20px;
left: 20px;
color:#009;
text-align:center;
border-bottom-color:black;
border-bottom-width:1px;
border-bottom-style:solid
}

#menubarcontainer {
position:relative;
width: 989px;
height: 15px;
margin-top:7px;
background-color:green;
}


#left {
position:relative;
float:left;
height:15px;
width: 200px;
left: 0px;
clear:none;
}

#middle {
width: 200px;
height:15px;
text-align:center;
margin-left:auto;
margin-right:auto;
clear:none;
}


#right {
float:right;
text-align:right;
width: 100px;
height:15px;
right: 0px;
top:0px;
z-index:+1;
clear:none;
}

Here is a link to a working example http://test.venndiagram.eu/menucontainer.html

Excavator
02-21-2011, 06:08 PM
Hello valentine,
What happens when you change the order of your markup so the floats come first?
Like this -


<div id="left"> Left</div>
<div id="right"> <a href="indexblog.html">Right</a></div>
<div id="middle"> Middle </div>

valentine
02-21-2011, 06:12 PM
Hello valentine,
What happens when you change the order of your markup so the floats come first?
Like this -


<div id="left"> Left</div>
<div id="right"> <a href="indexblog.html">Right</a></div>
<div id="middle"> Middle </div>


Hi Excavator. I seem to have fixed this with trial and error. I set the width of my columns using percentages and I think I'd forgotten to float one of them left.

It now does what I wanted it to do. Here is what I changed it to in case it helps anyone.

I'm posting the code in case this helps anyone but this doesn't come from an expert, I just got there through trying it:


#left {
float:left;
height:15px;
width: 20%;
float:left;
}

#middle {
float:left;
width: 60%;
height:15px;
text-align:center;
clear:none;
}


#right {
float:right;
text-align:right;
width: 20%;
height:15px;
}

Excavator
02-21-2011, 06:17 PM
Have a look at this example of a 3 column layout (http://nopeople.com/CSS%20tips/simple3column/index.html#css).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum