6 replies to this topic

[Stu]

hello

i have this section of my layout, it has 3 uneven sections to it covering the lenght of the layout.

i can position section 1 & 3 using css ( float: left; and float: right; ), but i cannot position the middle one properly. is there any way i can position it using coordinates or anything?

before and after images below:

[rc69]

A link to the actual source so we can see exactly what you're doing would be nice. But other then that, try floating the middle one left.

I also hear the CSS section of this site has tons of tutorials for 3 column CSS layouts... run through those and see if you can get any ideas.

[Stu]

rc69, on Oct 8 2005, 08:49 PM, said:

A link to the actual source so we can see exactly what you're doing would be nice. But other then that, try floating the middle one left.

I also hear the CSS section of this site has tons of tutorials for 3 column CSS layouts... run through those and see if you can get any ideas.

ive had a look thorugh tutorials i cant seem to find anything. a few have given me some ideas but to no avail.

unfortuantely i have not got it online atm, but here is the relevant code i have:

css:

Quote

#head-container{
margin: auto;
width: 709px;
height: 100px;
background-color: white;
color: black;
}

#head-bar{
margin: auto;
width: 709px;
height: 19px;
color: black;
background: url("images/head-bar.gif");
}

#head-content1{
margin: auto;
width: 253px;
height: 67px;
color: black;
background: url("images/head-content1.gif");
float: left;
}

#head-content2{
margin: auto;
width: 297px;
height: 67px;
color: black;
background: url("images/head-content2.gif");
}

#head-content3{
margin: auto;
width: 159px;
height: 67px;
color: black;
background: url("images/head-content3.gif");
float: right;
}

#head-bottom{
margin: auto;
width: 709px;
height: 14px;
color: black;
background: url("images/head-bottom.gif");
}

html:

Quote

<div id="head-container">
<div id="head-bar"></div>
<div id="head-content1"></div>
<div id="head-content2"></div>
<div id="head-content3"></div>
<div id="head-bottom"></div>
</div>

[d7x]

try using clear: both; in head-bottom css code

all floats require clear: both; somewhere

http://www.pixel2lif...showtopic=13350 - may give u some ideas to try

Edited by d7x, 08 October 2005 - 06:30 PM.

[coolaid]

d7x, on Oct 8 2005, 11:29 PM, said:

all floats require clear: both; somewhere

not true...


use float:left;
on all three of three columns.

[d7x]

well its best to use it...

[Stu]

thanks alot fellas, i used float: left; on all of them it seems to work ok now