Drops without using floats - math prob?

HTML & CSS
1

Hi,

working on some e-commerce template thing and i’m trying to convert it to fluid. Since i almost always use the display: inline-block; instead of floats i’m usually free of drop problems but this time it’s a huge problem. I haven’t set a min-width on the page yet but i don’t think it’s related to that because as soon as you resize the viewport a few pixels the stuff drops way below lol…

So is something messing with my math?

page
css

I’ve used background colors for testing purpose on the header and the right column

The css isn’t pretty: not my own…

2

Hi Rayzur, i didn’t look as far as the header regarding the height because i just started out to build it from fixed to fluid … hence i missed the overflow:hidden at this stage. My next step was to convert the fixed inner divs in the columns into ems … but it’s starting to look promising now with your help :smiley:

3

Hi Rayzur, just came home and had a glance over your replies … won’t be able to start now but just as not to let this thread die lol … indeed i had those replies on the layout but it’s a PITA because it’s one of those prefabricated e-commerce thingies… 90% of the stuff is generated with php and just the bare minimal stuff is html scattered over a dozen of files … well, i’m sure you get the idea … it’s not as easy as when you have set up your own html code and do a quick overhaul over the layout … i’ve always tried to stay away from these things but now i’m stuck with it … FB just shows me how awful things are lol … but on the other hands it’s a nice exercise (trying to be positive lol)…

4

I suspect you have some whitespace nodes that are throwing your math off.

For the sake of testing I set font-size:0; on #page and the columns popped up on the same line.

5

The left column is hanging on that floated “Welcome Login” on the left side of the header.

Your going to have to take the height off that header and set overflow:hidden on it to contain the floats.

You may as well take the % widths of all three columns also, they all have pixel fixed width divs nested in them. The columns will shrinkwrap just like a float does. You will need to set a min-width on #page also.

After you do that (and remove font-size:0; from #page) then everything should line up.

That floated “Welcome Login” is the root of the problem

6

Woops, disregard that previous comment about the overflow property (even though it works).
I was missing vertical-align:top on my inline blocks. :blush:

.in-blk {
    display:inline-block;
    margin:0 0 50px;
    /*overflow:hidden; use v-a:top instead*/
   [B] vertical-align:top;[/B]
}
7

Right, the reason pixels are the only thing that work is because there is nothing to scale the column (children) font-sizes from anymore. It was just a test to kill the whitespace nodes.

I don’t have to tell you about the layout, I remember Paul and Stomme Poes telling you about it in your other thread. Firebug shows the columns are laying all over each other.

I’d start over on the column layout.

Why don’t you set up a reduced test case of the columns only (get rid of everything nested in the columns) so you can find out exactly what’s going on.

8

Here is a simple test case that shows the whitespace between the columns when you have line breaks between the divs in the html.

I noticed something else when I set up this example. The sidebars were dropping whenever I use the <br> tag for line breaks in the the main column “p”. The overflow property set up a new block format and fixed it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inline-Block Test</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.4 arial,helvetica,sans-serif;
}
.wrap {
    width:100%;
    text-align:center;
}
.left,
.right {
    width:20%;
    min-height:200px;
    background:#0F0;
}
.main {
    width:40%;
    min-height:200px;
    background:#CDF;
}
.in-blk {
    display:inline-block;
    margin:0 0 50px;
    overflow:hidden;/*stop columns from dropping when text wraps*/
}

* html .in-blk {display:inline}
*+html .in-blk {display:inline}

</style>

</head>
<body>

<div class="wrap">
    <div class="left in-blk"><p>Left</p></div>
    <div class="main in-blk"><p>Main<br>(TEST 1: Whitespace)</p></div>
    <div class="right in-blk"><p>Right</p></div>
</div>

<div class="wrap">
    <div class="left in-blk"><p>Left</p></div><div class="main in-blk"><p>Main<br>(TEST 2: No Whitespace)</p></div><div class="right in-blk"><p>Right</p></div>
</div>

</body>
</html>
9

arrrgh … indeed that did it Rayzur :slight_smile: The font-size:0 ofcourse makes the text disappear but the strange thing is that on redefining the font-size again for the columns, it only works id i use pixels. Relative units don’t seem to work… what could cause this?

10

The reason the page appears to work now with font-size:0; on #page is because it has made that float disappear since it has a width of 10em on it. It is now width:0;

#header_user p {
color:#FFFFFF;
float:left;
margin-top:-1em;
position:relative;
[COLOR=Red]width:10em;[/COLOR]
}

If you want the user info to hang out of the header your going to have to find another way to do it.

Your footer has also lost it’s em padding for the same reason. As I mentioned the font-size:0 was just a test but it looks like it has revealed the culprit. :wink: