CSS Float Problem 2

gaptrast

gaptrast

Member
Messages
123
Reaction score
0
Points
16
Hello,

I am using a website like this:

float.JPG

Two floated divs with different heights according to the content.

The problem is, that if I do not set a height it will show up like that they were not there.

float2.JPG

Did you understand it? Is there a solution to solve it?
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Set up two pages, float01.html and float02.html and post links.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
From the second figure, it looks like you want the floats to be auto-cleared. In addition to the sitepoint "Simple Clearing of Floats" article, read "Clearing Floats" on Quirksmode.

Generally speaking, code says more than pictures. The best way of showing what you're doing when asking about wed design is to post minimal sample code and a/ link/s to a/ live page/s along with any figures.
 
bidzey75

bidzey75

New Member
Messages
53
Reaction score
0
Points
0
gaptrast said:
Did you understand it? Is there a solution to solve it?
Click to expand...

I think... (emphasize on I THINK ) I understand, and a quick answer is no. someone can correct me if I'm wrong, but if you want an empty block you'll have to specify 3 things. Width, height, and display:block.

gaptrast said:
Two floated divs with different heights according to the content.
Click to expand...
If by any chance you want your columns to be the same height there are few solutions to that, but if you want one that will stay away from javascript here's the code that take 3 columns and makes them all the same height of the longest. It's a dirty trick, but whoo whoo CSS is fun :redface:

Actually what's happening here, is there's 3 containers and they are pushed off the screen to a percentage to show the one behind.
more info here, credit:

here's the code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}
	
</style>
</head>

<body>
<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">
			Column 1
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			Bottom of Column 1
			</div>
            <div id="col2">
			Column 2
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			Bottom of Column 2
			</div>
            <div id="col3">
			Column 3
			<p>&nbsp;</p>
			Bottom of Column 3
			</div>
        </div>
    </div>
</div>
</body>
</html>

if you want 2 columns, take away a container and adjust the width accordingly
 
Last edited:
P

playminigames

New Member
Messages
216
Reaction score
6
Points
0
I also had this problem a couple of months ago, and it was really annoying. Im not sure if this is the correct solution, but I think I changed the div that contains everything(the one that you had to set the height, or it wouldn't work). For this changed I set a min-height, and also overflow:auto. This may or may not help you, but this is what has worked for me in the past.
 
You must log in or register to reply here.
Top