css float question
- Started
- Last post
- 24 Responses
- jbenjohnson
hello folks, i've got a css question. here is the scenario:
I've got a div 750px wide.
I've got 4 divs inside
400px
400px
400px
250pxAll divs are floated left.
It should create a standard 2 column layout yes? I expected the 250px div to float to the top, to the right of the 3 divs, but it gets hung up before it gets to the top.
Anybody have a fix?
- 7point340
well it depends on what order the divs are in i would think
put the 250px second in your list
- jbenjohnson0
yes, i could do that. but do you know why it won't float to the top?
I'm stumped as to why its getting hung up.
- well the 400px divs are all trying to float left and since that equals 800 pix none of them will be next to each other7point34
- 7point340
or you could float the 250px one right instead
- tymeframe0
have you tried clearing the floats after the last div?
- clearing after the last 400 and before the 250? yesjbenjohnson
- Josev0
the 250 px wide is supposed to be on the left side? And the wide columns on the right?
- 400s on the left and 250 on the rightjbenjohnson
- oh, the thin column is supposed to be to the right. If it's placed at the top and floated to the right it should work.Josev
- any margins that could be creating a problem?
Post the file.Josev - yes i could do that. i may have too, but i'd like to keep the source order if possiblejbenjohnson
- actually, I think that it should come before the items that it floats around.Josev
- tymeframe0
the only other thing i can suggest and this worked for me...
put the 3 divs in a containing div and float it left
- jbenjohnson0
i could do that.
i'm mostly wondering why the small div won't float all the way to the top when there is space on the right side.
maybe there's no work around... but it seems like there should be somebody who's run in to this before.
- i don't see any other way to do it with floats unless you change the stack order in html7point34
- 7point340
otherwise, use positioning
- canuck0
Can't you just create a container div, inside that a left (400 content) and right div (250 content) float both left
- well sure if you want to be obtuse about it7point34
- i can't add any html, only the cssjbenjohnson
- yuuuupflyingnowhere
- Don't sauce me jash.canuck
- good suggestiontymeframe
- flyingnowhere0
400's no float
position absolute on the 250 - right: 0px;
position relative on the container
- jbenjohnson0
ok, so when I remove the float:left and width:250px from the div, it fills up that space on the right side...
- why is the small column floated left when you want it to be on the right side?Josev
- jbenjohnson0
i'm going to go with flyingnowhere's suggestion and position it absolutely
- jbenjohnson0
update:
i tried going with the position:absolute idea, which worked great on the pages where the left column was longer than the right.
in certain cases the right column was longer, which caused the right column to pop-out from the containing div. applying overflow:auto forced scroll bars.
any other ideas? thanks
- Not_Just_Another0
create two columns within the 750 div, one floated left the other floated right. Don't forget to clear the floats with a div at the end.
<div class="750">
<div class="leftColumn">
<div class="400"></div>
<div class="400"></div>
<div class="400"></div>
</div>
<div class="rightColumn">
<div class="250"></div>
</div>
<div class="clear"></div>
</div>
- Stugoo0
can you post a code snipet and Ill try to help
- Not_Just_Another0
^ Sorry forgot the CSS:
.750 {
width: 750px;
}.leftColumn {
float: left;
width: 400px;
}rightColumn {
float: right;
width: 250px;
}.clear {
height: 0;
width: 0;
line-height: 0;
clear: both;
font-size: 0;
}That should do it - 2 column grid within a 750px div. Try adding background colours to hepl denote whereabouts each div sits, then remove them once your happy.
- such0
- jbenjohnson0
that problem is i can't edit the html
- jbenjohnson0
thanks for the suggestions everybody. I know how to do the two column approach, and I can change the order of the divs, which I may be forced to do.
but I'm just unclear as to way the floats are behaving in the way the are.
- jbenjohnson0
ok i found a solution!
for the 250px div, I removed the float:left and width: 250px. this moved the div all the way to the top on the right. I then gave it margin: 0 20px 0 470px. that placed it right where I wanted it.