CSS layout

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

UKuser - 28 Sep 2006 11:56 GMT

Hi Folks,

Below is some test text which I've been working on, to try and get my
head around CSS more.

However I've observed 3 issues, mainly with Firefox which dont seem to
like some bits.

1) Although "centered" is centered, in Firefox the background colour
doesnt display
2) The borders in firefox appear to be much wider than IE
3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

Not quite sure why its not working, but can I recommend
http://www.yourhtmlsource.com/stylesheets/csslayout.html
for newbies explaining about layout - its not my own site, but its
good.

Thanks

Sp

<style>
body {
text-align:center;
}

#top{
width:100%;
height:50px;
background-color:cyan;
}

#overall{
width:100%;
height:100%;
background-color:lightgray;
}

#main {
margin:auto;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightblue;
}

#second{
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightgreen;
}

#third{
position:relative;
left:5px;
top:10px;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:yellow;
}

#right{
float:left;
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
}

#bottom{
float:left;
width:100%;
height:50px;
background-color:cyan;
}

#containedbottom{
right:0%;
left:0%;
position:absolute;
width:100%;
bottom:8px;
height:50px;
background-color:cyan;
}

#centered{
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
margin: 0 auto; text-align: left;
}

</style>
<body><div id="overall">

<div id="top">
this is top text
</div>
    <div id="main">
    this is test text
        <div id="second">
        second text
            <div id="third">
            third text
            </div>
        </div>
    </div>

<div id="right">
this text should appear to the right of first box
</div>
<div id="bottom">
this is bottom text
</div>
<div id="centered">
this text should be centered
</div>
<div id="containedbottom">
this is bottom text v2
</div>

</div></body>

Reply to this Message

Ben C - 28 Sep 2006 20:46 GMT

> Hi Folks,
>
[quoted text clipped - 3 lines]
> However I've observed 3 issues, mainly with Firefox which dont seem to
> like some bits.

> 1) Although "centered" is centered, in Firefox the background colour
> doesnt display

Firefox is actually correct here, but what's going on is rather
complex...

If you set the background-color on #centered to green (so as not to
confuse it with the other red box) and then add

div {
-moz-opacity: 0.5;
}

to your style rules, you will see the green box behind the fog of the
other boxes (which are now semi-transparent).

Firefox has correctly centered the div with respect to its containing
block.

But when it comes to put the text into div#centered, it (correctly
again) tries to put it to the right of the left floats. But since there
isn't room for the text (the floats #main and #right actually completely
obscure the content area of div#centered), the text is moved downwards
until it clears the floats. It is therefore overflowing its containing
box, which is why you can't see the background. It left its background
behind, in the right place, behind all the other floats where you can't
see it!

> 2) The borders in firefox appear to be much wider than IE

They look like 1px to me, which is fine.

> 3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

This part I don't understand, both div#bottom and div#containedbottom
look like they're in the right places.

[...]

><style>
> body {
[quoted text clipped - 109 lines]
>
></div></body>

Reply to this Message

Bergamot - 28 Sep 2006 21:36 GMT

> I recommend
> http://www.yourhtmlsource.com/stylesheets/csslayout.html
> for newbies explaining about layout

Very bad idea. To quote from the Absolute Positioning section:
"If you position an element (an image, a table, or whatever) absolutely
on your page, it will appear at the exact pixel you specify."

This is not only incomplete, but even encourages the hugely bad design
practice of positioning everything on a page at absolute pixel x/y
coordinates.

No wonder there is so much crap on the web, if the uneducated are
learning from sources like this. :-(

Signature

Berg

Reply to this Message

Gus Richter - 28 Sep 2006 22:49 GMT

> Hi Folks,
>
[quoted text clipped - 6 lines]
> 1) Although "centered" is centered, in Firefox the background colour
> doesnt display

See Ben's response.
Add clear:left to centered div to fix the background.

> 2) The borders in firefox appear to be much wider than IE

"the 'border' property cannot set different values on the four borders"
which in essence you are doing. Change like so:

/*border: 1px 1px 1px 1px; REMOVE */
/*border-style:solid; REMOVE */
border:1px solid; /* ADD */

> 3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

You have this div (containedbottom) absolutely positioned, so although
it is inside your overall div (which is static) it is out of the normal
flow and its left/right positioning properties are relative to the
extreme left/right of the viewport.

If your overall div were relatively positioned, your absolutely
positioned containedbottom div's left/right positioning properties would
be relative to the overall div.

Signature

Gus

Reply to this Message

UKuser - 29 Sep 2006 16:39 GMT

Cheers for your help folks - everything fixed.

Sp

> > Hi Folks,
> >
[quoted text clipped - 29 lines]
> positioned containedbottom div's left/right positioning properties would
> be relative to the overall div.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2006

CSS layout