Beginner CSS question

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

^MisterJingo^ - 25 Feb 2006 22:51 GMT

Hi all,

Is it possible to create the following layout in CSS:

-------------------------------------------------

| |

-------------------------------------------------

| | |
| | |

----------- |

| | |
| | |

----------- |

| | |
| | |

-------------------------------------------------

| |

-------------------------------------------------

That is: a header and footer div, and 3 left divs in between them and
1 div on the right which is the same size of all the left divs.

I've been trying to do this for hours but can't seem to work it out.
Any help would be greatly appreciated.

Reply to this Message

Rob_W - 26 Feb 2006 00:11 GMT

> Hi all,
>
[quoted text clipped - 20 lines]
> I've been trying to do this for hours but can't seem to work it out.
> Any help would be greatly appreciated.

---------------------------------------------------
I call this div HEADER I
---------------------------------------------------

following the HEADER, you create a div MAIN

within the MAIN div you create LEFT and RIGHT

within the LEFT you create LEFT_ABOVE, LEFT_MIDDLE and LEFT_UNDER

---------------------------------------------------
I call this div FOOTER I
---------------------------------------------------

I hope you understand what I'm trying to let you do.
For the width of LEFT and RIGHT you use CSS,
use CSS also for the positioning of the three divs within LEFT.

Rob

Reply to this Message

^MisterJingo^ - 26 Feb 2006 00:25 GMT

> ---------------------------------------------------
> I call this div HEADER I
[quoted text clipped - 15 lines]
>
> Rob

Hi Rob,

Thanks for the reply. It makes sense. I'm not sure how I overlooked
such a thing!

Chris

Reply to this Message

Diane - 26 Feb 2006 15:06 GMT

Is something like this what you are envisioning?

You can adjust the sizes,spacing, or colors according to your needs..

HTH

<style>
#header {position:absolute; left:20; top: 20; width:600;
background-color:gray}
#left1{position:absolute; left:20; top:50; width:150; background-color:red}
#left2{position:absolute; left:20; top:90; width:150;
background-color:yellow; }
#left3{position:absolute; left:20; top:130; width:150;
background-color:blue}

#main{position:absolute; left:175 ; top:50; width:270;
background-color:ff66ff}
#right{position:absolute; left:450; top:50; width:100;
background-color:ccff99}
#footer{position:absolute; left:20; top:350; width:600;
background-color:silver}
</style>
<body>

<div id="header" style="width: 600; height: 30"> Header text here
Header text here Header text here</div>

<div id="main" style="width: 251; height: 299"> Main Text Here</div>
<div id="left1" style="width: 135; height: 43">
<p align="center"><b>LEFT 1</b></div>
<div id="left2" style="width: 136; height: 71">
<p align="center"><b>LEFT 2</b></div>
<div id="left3" style="width: 137; height: 45">
<p align="center"><b>LEFT 3</b></div>

<div id="right" style="width: 83; height: 300"> Right Text here </div>
<div id="footer" style="width: 600; height: 46"> Footer text here Footer
text here</div>

Reply to this Message

David Dorward - 26 Feb 2006 15:19 GMT

> Is something like this what you are envisioning?

<snip>

There are a few problems with that ...

* Invalid HTML.
* Deprecated presentational markup used.
* Invalid CSS (that the spec requires user agents to ignore)
* Very fragile design that (assuming the above errors were corrected, or a
browser wasn't implementing CSS correctly[1]) would lead to lots of
overlapping text.

[1] Quite common in quirks mode

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

^MisterJingo^ - 27 Feb 2006 14:10 GMT

Thanks for the help all.
What is the standard way of sizing a div within a div? For example, if
I have RIGHT_MAIN and I want a div inside it to be the same wifth as
it. Do I use the same width on both, or set the out to auto, or inner
to 100% etc? I ask as if I use padding, the page shows correctly in IE
but in other browsers the elft and right contents slightly overlap (I
could put up an image to show what I mean.

Any help would be greatly appreciated,

Chris

Reply to this Message

David Dorward - 27 Feb 2006 18:45 GMT

> What is the standard way of sizing a div within a div? For example, if
> I have RIGHT_MAIN and I want a div inside it to be the same wifth as
> it. Do I use the same width on both, or set the out to auto, or inner
> to 100% etc?

width: auto on an element with display: block means "Fill the width of the
parent element after leaving room for margins, padding and borders).

> I ask as if I use padding, the page shows correctly in IE
> but in other browsers the elft and right contents slightly overlap (I
> could put up an image to show what I mean.

Sounds like your choice of Doctype (or lack thereof) has caused Microsoft to
brand you "Foolish person who don't know how to write webpages" and thus
deliberately interpret CSS incorrectly. One of the mistakes it makes (on
purpose) is to place padding inside the width.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

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

Beginner CSS question