homepage Welcome to WebmasterWorld Guest from 54.145.183.190
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Newbie problem - div boxes not lining up properly with CSS-P
groovyhippo

10+ Year Member



 
Msg#: 2617 posted 2:08 pm on Jan 9, 2004 (gmt 0)

I'm having my first attempt at doing a layout using CSS but am having problems with lining up the various div boxes. In the code below, the three absolutely positioned boxes (masthead, leftbar and rightbar) all line up perfectly. But the centre content box overlaps the masthead by 3 pixels and doesn't quite meet the boxes either side of it. I have to change the "top" value for the content box to be 43px in order for it to meet exactly. Why is this when the height of the masthead is 40px?

Code follows...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
body {
color: #333333;
background-color: white;
margin: 0px;
padding: 0px;
font: 11px verdana, arial, helvetica, sans-serif;
}

#masthead {
position: absolute;
background: lightsalmon;
height: 40px;
width: 100%;
top: 0px;
left: 0px;
padding: 3px 0px 0px 10px;
z-index: 4;
}

p {
font: 11px/16px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 10px 0px;
padding: 0px;
}

#leftbar {
position: absolute;
width: 150px;
top: 40px;
left: 0px;
background-color: #eeeeee;
padding: 10px;
z-index: 2;

voice-family: "\"}\"";
voice-family: inherit;
width: 128px;
}

body>#leftbar {width:128px;}

#rightbar {
position: absolute;
width: 250px;
top: 40px;
right: 0px;
background-color: lightsteelblue;
padding: 10px;
z-index: 1;

voice-family: "\"}\"";
voice-family: inherit;
width: 228px;
}

body>#rightbar {width:228px;}

.content {
position: relative;
width: auto;
min-width: 120px;
margin: 0px 250px 0px 150px;
top: 40px;
background-color: yellow;
padding: 8px 15px 15px 15px;
z-index: 99;
}

</style>
</head>

<body>

<div class="content">
<p>This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page.</p>
</div>

<div id="leftbar">
<p>This is the content that sits in the left bar on the left of the page.</p>
</div>

<div id="rightbar">
<p>This is the content that sits in the right bar on the right of the page.</p>
</div>

<div id="masthead">
<p>Masthead</p>
</div>

</body>
</html>

 

ukgimp

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 2617 posted 2:39 pm on Jan 9, 2004 (gmt 0)

Remove the strict doctype and try again. Could be quirks mode.

[webmasterworld.com...]

dcrombie

10+ Year Member



 
Msg#: 2617 posted 2:42 pm on Jan 9, 2004 (gmt 0)

The padding on your "masthead" will be ADDED to the height you set.

ie. Total Height = defined height (40) + padding (3) + borders (0) + margins (0) = 43

groovyhippo

10+ Year Member



 
Msg#: 2617 posted 2:52 pm on Jan 9, 2004 (gmt 0)

Thanks Drcrombie, that makes sense and the top of the center content now lines up with the masthead.

But I'm still having trouble with lining up the sides of the centre content with the left and right columns. The left column has a width of 150px and padding of 10px. Given what you've said shouldn't my center content need to start at 170px from the left? It seems that I have to start it at 148px for it to line up.

groovyhippo

10+ Year Member



 
Msg#: 2617 posted 3:00 pm on Jan 9, 2004 (gmt 0)

And am I right in thinking that what you said about padding being added to the height doesn't apply to IE 5.5? That seems to be what I've observed from my testing in different browsers. I have to revert to the top:40px setting for it to line up then.

If that's the case, then I don't think I'll bother with CSS layouts - seems like too much of a headache compared to tables!

dcrombie

10+ Year Member



 
Msg#: 2617 posted 3:26 pm on Jan 9, 2004 (gmt 0)

IE got the box algorithm completely wrong. They use:

"inner height" = defined height (40) - margins (0) - borders (0) - padding (3) = 37

There's a work-around here [tantek.com] and maybe some other options if you look around.

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 2617 posted 3:36 pm on Jan 9, 2004 (gmt 0)

Nothing wrong with using a strict doctype ukgimp, in fact it helps because it puts the browser in 'standards compliant' mode which means we can ditch all those nasty browser hacks he had in.

Heres my version of your code:
[pre]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 11px/16px verdana, arial, helvetica, sans-serif;
}
#masthead {
position: absolute;
top: 0px;
left: 0px;
background: lightsalmon;
height: 40px;
width: 100%;
padding: 3px 0px 0px 10px;
}
p {
margin: 0px 0px 10px 0px;
padding: 0px;
}
#leftbar {
position: absolute;
top: 43px;
left: 0px;
width: 150px;
background-color: #eeeeee;
padding: 10px;
}
#rightbar {
position: absolute;
top: 43px;
right: 0px;
width: 250px;
background-color: lightsteelblue;
padding: 10px;
}
.content {
position: relative;
top: 43px;
width: auto;
min-width: 120px;
margin: 0px 270px 0px 170px;
background-color: yellow;
padding: 8px 15px 15px 15px;
}
</style>
</head>

<body>

<div class="content">
<p>This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
</p>
</div>

<div id="leftbar">
<p>This is the content that sits in the left bar on the left of the page.</p>
</div>

<div id="rightbar">
<p>This is the content that sits in the right bar on the right of the page.</p>
</div>

<div id="masthead">
<p>Masthead</p>
</div>

</body>
</html>
[/pre]

A word of warning about absolute layouts
I guess you are probably constructing the page like this for SEO reasons (i.e. putting the content first) but be warned there are some pitfalls to absolute layouts like this. Namely:

  • since everything has a given size they don't usually respond very well to the user changing the font size.
  • they often rely on every browser rendering the page in EXACTLY the same way
  • if the user is using a screen reader, a text only browser, or a cut down browser in a PDA then your page is going to be in a weird order.

    You could instead construct the page so that the html appears as masthead,left,right,content and then just float the left column to the left and right to the right. No absolute positioning required.

    GrahamS

  • groovyhippo

    10+ Year Member



     
    Msg#: 2617 posted 3:53 pm on Jan 9, 2004 (gmt 0)

    Graham - I've tried your version and it works perfectly in Netscape, but displays with loads of whitespace between the boxes in IE 5.5. And I guess there shouldn't be any hacks in there to prevent this because, as you say, it is using the strict DTD.

    You're right I am constructing the page like this with a view to better SEO. But I am also doing it this way for precisely the reason you state as a drawback - I had thought those with screenreaders etc would want to hear the content first and not bother with all the surrounding headers, menus, etc.

    I'll have a play around with your float idea and see how that goes. But right now, I'm fast becoming disillusioned with the benefits of using CSS as an alternative to tables!

    grahamstewart

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2617 posted 4:09 pm on Jan 9, 2004 (gmt 0)

    Sorry to hear your getting disillusioned with CSS but it happens to the best of us! but trust me, its the future, it just requires learning a few new skills.

    > I am constructing the page like this with a view to better SEO

    In terms of SEO then CSS is definitely the way forward. You'll end up with a much higher Text-to-HTML ratio, your page will (hopefully) be marked up correctly (without tables and styling to obscure its meaning) and it should be a fair bit smaller as well.

    All this leads to better indexing.

    As for accessibility, well those with screenreaders are never going to thankyou for using tables-for-layout. Personally I order my HTML in the 'natural' order but I always supply 'hidden' links for screenreaders that can be used to skip over menus. This is in keeping with the Bobby standards.

    grahamstewart

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2617 posted 4:11 pm on Jan 9, 2004 (gmt 0)

    BTW: using the strict doctype doesn't mean you can't use hacks. It just means that you shouldn't need them in 'modern' browsers (e.g. its fine in IE6, Opera 7 and NN7)

    If its not working properly in IE5.5 then feel free to add some hacks back in. I really just took them out for clarity.
    (If its purely for IE then consider using IE conditional comments instead of the messy CSS syntax hacks).

    Safir

    10+ Year Member



     
    Msg#: 2617 posted 4:42 pm on Jan 9, 2004 (gmt 0)

    Groovyhippo said: " But I am also doing it this way for precisely the reason you state as a drawback - I had thought those with screenreaders etc would want to hear the content first and not bother with all the surrounding headers, menus, etc."

    I agree, they do prefer to hear the content first. And like GrahamS said, a hidden link for them to skip to the navigation will make them love you!

    This is an example. Doesn't work in my opera (7.23) But seems to work fine in most screen readers.


    a#skip{
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
    top: 5px;
    left: 10px;
    }
    a#skip:active, a#skip:focus{
    overflow: visible;
    position: absolute;
    width: auto;
    height: auto;
    }

    Comments or better ways are very welcome!

    By the way, i thought is was getting of easy by just using display:none; but apparantly some screen readers (Jaws) apply some of the CSS...

    grahamstewart

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2617 posted 4:59 pm on Jan 9, 2004 (gmt 0)

    I usually just do this..

    <a class="accesslink" href="#content"><img src="/images/transparent.gif" width="1" height="1" alt="Jump to start of content"></a>

    where the accesslink class is defined as..

    a.accesslink img {
    height:1px;
    width:1px;
    position:absolute;
    border:none;
    }

    Works in all browsers and doesn't upset the layout at all.

    ukgimp

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2617 posted 5:02 pm on Jan 9, 2004 (gmt 0)

    grahamstewart

    I know there is nothing wrong and where possible I go for it. Just a quick way of seeing if that was the problem.

    you know do the old

    <!-- doc type -->

    groovyhippo

    10+ Year Member



     
    Msg#: 2617 posted 6:48 pm on Jan 9, 2004 (gmt 0)

    Well I think I now have a working version that looks pretty good in all/most browsers, using a combination of grahamstewart's code with the addition of the IE and Opera hacks.

    I guess I'll persevere with CSS layouts for a little while longer!

    Safir

    10+ Year Member



     
    Msg#: 2617 posted 7:21 pm on Jan 9, 2004 (gmt 0)

    Graham,

    Excellent! so simple i didn't even think of it. I'll let some people test it, but i'm quite sure it'll do great for them.

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / CSS
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved