Beginner CSS question

^MisterJingo^

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.

Feb 25 '06 #1

Subscribe Post Reply

1012

Rob_W

^MisterJingo^ wrote:

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.

---------------------------------------------------
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

Feb 26 '06 #2

^MisterJingo^

Rob_W wrote:

---------------------------------------------------
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

Hi Rob,

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

Chris

Feb 26 '06 #3

Diane

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>

Feb 26 '06 #4

David Dorward

Diane wrote:

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
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Feb 26 '06 #5

^MisterJingo^

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

Feb 27 '06 #6

David Dorward

^MisterJingo^ wrote:

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

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

Feb 27 '06 #7

Similar topics

Beginner question: Logs?

by: Svens | last post by:

Hey everyone! I'm a math student working on a short script involving logs. I have a function on my scientific calculator, and was wondering if there was a similar funtion in python. For example:...

Python

beginner question

by: jvax | last post by:

Hi all, I hope I'm posting in the right NG... I have a data text file I want to read from a c++ program. the data file goes like this: 90 # number of balls 33 42 13

C / C++

Beginner question about Reflection & code snippet.

by: Mike Malter | last post by:

I am just starting to work with reflection and I want to create a log that saves relevant information if a method call fails so I can call that method again later using reflection. I am...

C# / C Sharp

I keep getting this question on beginner study sheets...

by: z_learning_tester | last post by:

But I can't seem to find the answer. The question is how do you reverse the words in a string? Or how do you reverse the numbers listed in a string? The example is usually something like: Turn...

C# / C Sharp

Confused beginner

by: Blaze | last post by:

I am doing the first walk through on the Visual Studio .Net walkthrough book to learn a little about programming. I am having issues with the first tutorial not running correctly. It seems that...

C# / C Sharp

beginner's question

by: optimistx | last post by:

As a beginner in javascript I had a question. I was reading FAQ and posts here. I became very unhappy: Obviously this group is mainly for wise, pedantic, unkind etc people, who already know...

Javascript

beginner fscanf question

by: Roman Zeilinger | last post by:

Hi I have a beginner question concerning fscanf. First I had a text file which just contained some hex numbers: 0C100012 0C100012 ....

C / C++

VB.NET beginner Question

by: a | last post by:

Dear all vb.net developer I want to know the time I need to master vb.net? I'm beginner

.NET Framework

Write a file - beginner's question

by: Ben Keshet | last post by:

I have a probably simple beginner's question - I have a script that I am currently able to print its output. instead, i want to write it into a file - I tried different versions of write() but...

Python

ADO.NET in VS2008 or gdi+ (beginner question)

by: roanhn | last post by:

Hello. I've to to write a master's thesis. Currently I deal with php, mysql, ajax. Fate decreed that I've to choose one of this subjects: 1.gdi+ library in .net technology 2.ado.net technology...

.NET Framework

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing