homepage Welcome to WebmasterWorld Guest from 54.204.249.184
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
div column layout
Is this possible?
designaweb




msg:3971827
 11:10 am on Aug 14, 2009 (gmt 0)

I am trying to work out whether what I want is possible, and after trying and trying, I haven't found the solution. My last resort, as always, is to ask for help.

Here's the (relevant) HTML code:


<div id="container">
<div id="b1">block 1</div>
<div id="b2">block 2</div>
<div id="b3">block 3</div>
<div id="b4">block 4</div>
</div>

Now, without changing the order of the DIV's in the HTML, is it possible to:

- Display "block 2" and "block 4" on the left hand side
- Display "block 1" and "block 3" on the right hand side

The widths of all blocks are known, all heights are variable. I know I could use subcontainer divs, but I need to keep the HTML *exactly* the same to what it is right now. Is my layout possible with the sole use of CSS?


------------------------------------
.................................
......block 2............block 1
.................................
.................................
------------------------.........
.................................
......block 4...........---------
.................................
.........................block 3.
.................................
.................................
........................---------
........................
........................
........................
........................
--------------------------

 

birdbrain




msg:3971853
 12:17 pm on Aug 14, 2009 (gmt 0)

Hi there designaweb,

I have tested this example, successfully, in IE6, IE7, IE8, Opera 9.64, Safari 4 and Firefox 3.5.0.2...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container {
width:760px;
border:1px solid #000;
margin:auto;
overflow:auto;
}
#b2 {
width:570px;
float:left;
background-color:#fee;
}
#b4 {
width:570px;
background-color:#eef;
}
#b1 {
width:190px;
float:right;
background-color:#efe;
}
#b3 {
width:190px;
float:right;
clear:right;
background-color:#ffe;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#b4 {
float:left;
}
</style>
<![endif]-->

</head>
<body>

<div id="container">

<div id="b1">
<h1>block 1</h1>
<p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris.
</p>
</div>

<div id="b2"><h1>block 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum.
</p>
</div>

<div id="b3"><h1>block 3</h1>
<p>Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>

<div id="b4"><h1>block 4</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci.Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>

</div>

</body>
</html>


birdbrain

tangor




msg:3971968
 3:04 pm on Aug 14, 2009 (gmt 0)

Example provided works a charm, but would suggest NOT using 4 <h1> tags on the same page. There should be only ONE <h1> per page.

designaweb




msg:3972009
 3:52 pm on Aug 14, 2009 (gmt 0)

@birdbrain: Absolutely brilliant, you don't know how happy that just made me... It's Friday 17:50 here, but I'll definitely postpone my weekend for just a few hours more... Implementation time!

@tangor: Completely right, but I don't think birdbrain had SEO/semantics in mind while writing his example, as it was all about the CSS. Thanks for the warning though - you are absolutely right ofcourse!

birdbrain




msg:3972040
 4:28 pm on Aug 14, 2009 (gmt 0)

Hi there designaweb,

It's Friday 17:16 here and I am delighted to know that I have brought happiness to at least one person today. ;)

The reason for the use of four H1 elements in the code is, that I C&P'd the first and then used it for the other three.

I then left them that way, as you obviously realized, for aesthetic reasons rather than for any semantic considerations. :)

birdbrain

birdbrain




msg:3972055
 4:43 pm on Aug 14, 2009 (gmt 0)

Hi there tangor,

I notice that your home page fails validation. :o
..

You, obviously, have not included four H1 elements in the document, but I would suggest
that you give these errors your fullest and attention. ;)

birdbrain

[edited by: SuzyUK at 5:19 pm (utc) on Aug. 14, 2009]
[edit reason] specifics.. [/edit]

tangor




msg:3972125
 5:48 pm on Aug 14, 2009 (gmt 0)

The so-called "errors" are the validation site's inability to read proper frameset code. I can't fix their program!

birdbrain




msg:3972166
 6:50 pm on Aug 14, 2009 (gmt 0)

Hi there tangor,

I am sorry to have upset you with my comments about your page. ;)

But I would like to point out that the framespacing attribute that you have used is IE propriety code.

This will, of course, guarantee validation failure. :)

birdbrain

tangor




msg:3972186
 7:34 pm on Aug 14, 2009 (gmt 0)

I'm not upset. Site works in every version of FF I've ever run, and Opera, too! Parts ignored by better browsers don't count--but do count for those not so better browsers. :)

As for the "errors" the specifics WC3 validator found defy understanding, ie:

"COLS" did you mean "cols" ? When the code IS "cols"? (Every attribute of the frame declaration was listed as an error.) Scratching head!

This site has been up since 1996 with all new content CSS styled--and most of the previous table layout removed. Some things just won't validate when it's that old, but until it breaks completely I'm not changing it--some of my users have been with me since 1996 and they are used to it. And user familiarity is a significant consideration when managing/updating a website. Hence this one bit of advice:

Make sure your initial design is the one you want when you go live and is easy to update... changing your design every six months will confuse return visitors!

I like CSS.. use it on my commercial sites; highly recommended for relatively easy page layouts as long as exact reproduction across all browsers is not required. Most websites benefit from that flexibility.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved