CSS 3 Column layout

R

Rob Kirton

I am a relative newbie to html / CSS. After much reading of all on-line
resources, especially with respect to both box model and column layouts in
CSS, I set out to develop a 3 column layout page. The two problems I am now
facing, are both only experienced when using Internet Expirer 6

1. The columns behave badly when the page is narrowed (I can almost live
with that one)
2. The left column behaves strangely at all times (easy to see)

The platform is Windows XP and everything works to my satisfaction in
Mozilla 1.4 and Opera 7.20

There are already two small issues which have been resolved with respect to
Internet Exploder, however this one has me stumped. I hope there is another
*quick fix*. Hopefully somebody can help, firstly by suggesting a fix for
the Infernal Explorer 6 issue and secondly that things also check out in
version 5.x also.

I realise that the smart answer may be to use a proper browser. However I
must be realistic with respect to the size of the Imbecile Explore
population. You may gather I've been getting a little hacked off with I.E.
:0)

--------------- cut --------------------

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CSS layout - 3 columns with Header and Footer</title>

<style type="text/css">

body {margin:0em; padding:0em; font-family:sans-serif}
div {margin:0em; padding:0em}
p {margin:0em; padding:0em}
h1 {margin:0em; padding:0em}
h2 {margin:0em; padding:0.10em; background-color:#000000; color:#ffffff}
..wrap {margin:0em; padding:0.00em; color:#000000; background:#cccccc}
..header {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
..footer {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
..wrap-col {float: left;width:80%}
..col-one {float: right;width:75%}
..col-two {margin-right:75%}
..col-three {margin-left:80%}
..box-one {background: #ffffff; padding:0.50em; color:#000000;
overflow:hidden}
..box-two {background: #ccccff; padding:0.50em; color:#000000;
overflow:hidden}
..box-three {background: #ccccff; padding:0.50em; color:#000000;
overflow:hidden}

/* Needed for Internet Explorer 6 */
..footer {clear:both}

/* Needed for Internet Explorer 6 */
..wrap, .wrap-col, .col-one, .col-two, h2,h1 {position:relative}

</style>

</head>

<body>

<div class="wrap">

<div class="header">
<h1>HEADER</h1>
</div>

<div class="wrap-col">

<div class="col-one">
<div class="box-one">
<h2>Subject 3</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>
</div>

<div class="col-one">
<div class="box-one">
<h2>Subject 4</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>
</div>

<div class="col-two">
<div class="box-two">
<h2>Subject 1</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>
</div>

<div class="col-two">
<div class="box-two">
<h2>Subject 2</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>
</div>

</div>

<div class="col-three">
<div class="box-three">
<h2>Subject 4</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>
</div>

<div class="col-three">
<div class="box-three">
<h2>Subject 5</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>
</div>

<div class="footer"><h1>FOOTER</h1>

</div>

</div>

</body>
</html>

-------------------- cut -------------------

Thanks (in advance) for any help received

regards

- Rob
 
H

Headless

Rob said:
I am a relative newbie to html / CSS. After much reading of all on-line
resources, especially with respect to both box model and column layouts in
CSS, I set out to develop a 3 column layout page. The two problems I am now
facing, are both only experienced when using Internet Expirer 6
Click to expand...

Google using your subject line, loads of resources available.


Headless
 
S

SteW

Simple one for 3 unrelated cols eg, internal nav - main text -
external links.

ie5.5 should be ok, better check for 5.0. Don't even try with ns4, use
stylesheet hiding.


<html>
..
..
<h1><img src="logo.gif" alt="logo replacement">header text, if any</h1>

<div class="leftcol">blah blah</div>
<!-- floated left, width in ems -->

<div class="rightcol">blah blah</div>
<!-- floated right, width in ems -->

<div class="main">blah blah</div>
<!-- no float, no clear, no width specified, margins in ems -->

<div class="footer">blah blah</div>
<!-- no float, no clear, no width specified -->
..
..
</html>

main and footer may not need to be enclosed in divs thereby reducing
clutter. Put colour styling and padding in .leftcol and .rightcol and
there is no need for box-one etc.

Ste W
 
R

Rob Kirton

<html>
.
.
<h1><img src="logo.gif" alt="logo replacement">header text, if any</h1>

<div class="leftcol">blah blah</div>
<!-- floated left, width in ems -->

<div class="rightcol">blah blah</div>
<!-- floated right, width in ems -->

<div class="main">blah blah</div>
<!-- no float, no clear, no width specified, margins in ems -->

<div class="footer">blah blah</div>
<!-- no float, no clear, no width specified -->
.
.
</html>
Click to expand...

Thanks for this, I will give it a spin. I hadn't thought of not including
header and footer (as stated below) within <div> elements. I was also
intending to make the style external and hide from NN4. The intention also
to have the page degrade gacefully for non CSS
main and footer may not need to be enclosed in divs thereby reducing
clutter. Put colour styling and padding in .leftcol and .rightcol and
there is no need for box-one etc.
Click to expand...

I had already got around to that way of thinking this morning , with
improved results. Mozilla & Opera still behaving well, IE is no longer
dropping the left column, however is still behaving eccentrically when width
re-sized. Subject one is disappearing though Subject two remains.

---------------- cut --------------

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CSS layout - 3 columns with Header and Footer</title>

<style type="text/css">

body {margin:0em; padding:0em; font-family:sans-serif}
div {margin:0em; padding:0em}
p {margin:0em; padding:0em}
h1 {margin:0em; padding:0em}
h2 {margin:0em; padding:0.10em; background-color:#000000; color:#ffffff}
..wrap {margin:0em; padding:0.00em; color:#000000; background:#cccccc}
..header {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
..footer {margin:0em; padding:0.50em; color:#000000; background: #9e9eb7}
..wrap-col {float: left;width:80%}
..col-one {background: #ffffff; padding:0.50em; color:#000000;
overflow:hidden; float: right;width:75%}
..col-two {background: #ccccff; padding:0.50em; color:#000000;
overflow:hidden; margin-right:75%}
..col-three {background: #ccccff; padding:0.50em; color:#000000;
overflow:hidden; margin-left:80%}

/* Needed for Internet Explorer 6 */
..footer {clear:both}

/* Needed for Internet Explorer 6 */
..wrap, .wrap-col, .col-one, .col-two, h2,h1 {position:relative}

</style>

</head>

<body>

<div class="wrap">

<div class="header">
<h1>HEADER</h1>
</div>

<div class="wrap-col">

<div class="col-one">
<h2>Subject 3</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
<h2>Subject 4</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>

<div class="col-two">
<h2>Subject 1</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
<h2>Subject 2</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>

</div>

<div class="col-three">
<h2>Subject 4</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
<h2>Subject 5</h2>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>

<div class="footer"><h1>FOOTER</h1>

</div>

</div>

</body>
</html>

---------------- cut -------------

thanks

- Rob
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Text does not display correctly to glow 2
Positioning CSS components 1
How to position the *tooltip* comment on these buttons? 9
Justify-content not working 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
<Button ...> display is fine, except for two things 1
Gallery - mosiac/grid layout with filtering and information page popup 1
Clickable Div Block 1

Members online

No members online now.
Total: 34 (members: 1, guests: 33)
Robots: 450

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top