CSS Float Problem 2

**gaptrast** · 05-11-2011 12:15 PM

Hello,

I am using a website like this:

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.

Did you understand it? Is there a solution to solve it?

**descalzo** · 05-11-2011 12:32 PM

Set up two pages, float01.html and float02.html and post links.

**misson** · 05-11-2011 01:12 PM

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** · 05-11-2011 06:11 PM

Originally Posted by gaptrast

Did you understand it? Is there a solution to solve it?

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.

Originally Posted by gaptrast

Two floated divs with different heights according to the content.

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

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

**playminigames** · 05-14-2011 10:30 AM

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.

**gaptrast** · 05-14-2011 12:13 PM

solved it using inline-block in parent element.

thanks to http://becreativemagazine.com/2010/0...to-solve-them/

Thread: CSS Float Problem 2

LinkBack

Thread Tools

Display

CSS Float Problem 2

Re: CSS Float Problem 2

Re: CSS Float Problem 2

Re: CSS Float Problem 2

Re: CSS Float Problem 2

Re: CSS Float Problem 2

Similar Threads

CSS Float problem

SlideDeck issue, CSS Float question, & google CSE questions...

Div Float problem...

help with float:left; attribute

Float CSS

Posting Permissions