By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,871 Members | 2,418 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,871 IT Pros & Developers. It's quick & easy.

CSS layout

P: n/a
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/styles...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>

Sep 28 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 2006-09-28, UKuser <sp********@yahoo.co.ukwrote:
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
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 {
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>
Sep 28 '06 #2

P: n/a
UKuser wrote:
>
I recommend
http://www.yourhtmlsource.com/styles...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. :-(

--
Berg
Sep 28 '06 #3

P: n/a
UKuser wrote:
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
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.

--
Gus
Sep 28 '06 #4

P: n/a
Cheers for your help folks - everything fixed.

Sp
Gus Richter wrote:
UKuser wrote:
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

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.

--
Gus
Sep 29 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.