div / column layout problem

**GOLGO-13** · Sep 7, 2004, 10:56

hey.. my first post!
i've been looking at this tutorial:http://www.webreference.com/authorin...yout/advanced/ and i really like the ideas.. but i must be slow or something, cause i cant seem to use those ideas to create my own layout. (see attached gif) i'm hoping somebodyhere could show me what i need to do to create this layout using div/span tags and.. comment the code. i'm assuming for anybody who understands the techniques well, it'd only take a minute or two..

however if i'm mistaken, and thats actually a lot of work, then maybe somebody could point me to some other tutorials that might be a little eaiser for me to follow? or maybe to a layout online somewhere that is like what i'm trying to do?

thanks a zillion!!

mmmm.. maybe it's right in front of me and i'm just not seeing it.. but when i view this post, i dont see the attached gif anywhere. here's a link to the layout gif: http://gotchaopen.net/Assets/css.div_column_layout.gif

**loadx** · Sep 7, 2004, 12:26

Heres the body.

NOTE: all the boxes are nested inside the big red box named "middle"

HTML Code:

<body>
<div id="topnav" class="nav">Navigation</div>
 <div id="middle" class="middle">
    <div id="box" class="boxvert">content</div>  
    <div id="box2" class="boxvert2">content</div>
    <div id="box3" class="boxhorz">content</div>
 </div>
<div id="botnav" class="nav">Navigation</div>
</body>

CSS with comments

Code:

body,html 
{
 margin-top: 5px;
 margin-left: 104px;
 background-color: #EDEDED;
 /*keep mozilla happy*/
 height: 100%;
 weight: 100%;
}


.nav 
{ 
 background-color: #000000; /*black*/
 /*font crap*/
 font-size: 24px; 
 font-weight: bold;
 font-family: arial;
 color: #FFFFFF;
 text-align: right;
 /*set the size*/
 width: 70%;
 height: 30px;
 /*pull the text off the edge*/
 padding: 5px;
}
	

.middle 
{
 background-color: #FF0000; /*red*/
 /*set the size*/
 width: 70%;
 height: 85%;
 /*space div's*/
 padding: 5px;
}


.boxvert
{
 border: 1px solid #FFFFFF;
 /*shift it left and down*/
 margin-left: 20px;
 margin-top: 20px;
 /*set size*/
 height: 380px;
 width: 240px;
}


.boxvert2
{
 border: 1px solid #FFFFFF;
 /*set size*/
 height: 380px;
 width: 240px;
 /*get the divs side by side*/
 float: right;
 position: absolute;
 /*manual co-ords*/
 top: 75px;
 left: 400px;
}


.boxhorz
{
 border: 1px solid #FFFFFF;
 /*set size*/
 height: 90px;
 width: 510px;
 /*position it*/
 position:absolute;
 top: 485px;
 /*bring it off the sides*/
 margin-left: 20px;
 margin-right: 20px;
}

Hope that helps you, any questions feel free to pm or jsut leave a message here.
ciao

oh yeah forgot, you can view it here:
(the positioning may be a little off in different resolutions :S)
CSS Positioning

**GOLGO-13** · Sep 7, 2004, 12:39

COOL!!!

i'm playing around with it now.. i'll let you know how it works for me!

thanks a lot!!!

**Paul O'B** · Sep 7, 2004, 14:27

Hi,

Without wishing to seem ungrateful I think I need to point out a couple of errors in the above code. Please don't take this the wrong way but I do like things to be correct where possible

(and I realise this may just be an oversight as we all make mistakes at some time.

This piece of code here:

Code:

.boxvert2
{
 border: 1px solid #FFFFFF;
 /*set size*/
 height: 380px;
 width: 240px;
 /*get the divs side by side*/
 float: right;
 position: absolute;
 /*manual co-ords*/
 top: 75px;
 left: 400px;
}

You have floated it right and then used position:absolute. It can't be both, it has to be one or the other. Which one is the browser going to select?

If you place the element absolutely then it is removed from the flow and will not be able to exert pressure on the footer or remaining content in the document. You will be better off floating the element and then letting the elements below clear it with clear:both etc.

Your linked example above shows the horizontal box completely covering the footer at 1024x768 res and reducing the widow in any direction results in most of the elements overlapping.

I've tidied the code up (a bit) so that elements respect each other but I have used a fixed size. Obviously a fluid width could be applied also now that the elements are not absolutely placed.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body 
{
 margin: 0;
 padding:0;
 background-color: #EDEDED;
 text-align:center;/* centre for ie5 and 5.5. */
 min-width:664px/* for mozilla to stop sliding off the left side */
}
#container {
width:664px;/*set the size*/
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre for compliant browsers */
background:#000;
text-align:left;/*reset text*/
}
.nav 
{ 
 background-color: #000000; /*black*/
 font-size: 24px; 
 font-weight: bold;
 font-family: arial;
 color: #FFFFFF;
 text-align: right;
 /*set the size*/
  height: 30px;
}
#middle 
{
 background-color: #FF0000; /*red*/
 /*space div's*/
 padding: 5px;
}
#boxvert, #boxvert2
{
border: 1px solid #FFFFFF;
margin: 20px;
min-height: 360px;
width: 280px;
float:left;
display:inline;/* ie double margin fix*/
}
 * html #boxvert, * html #boxvert2{height:380px}/* for ie*/
#boxvert2{float:right;}
#boxhorz
{
 border: 1px solid #FFFFFF;
 height: 90px;
 width: 614px;
 margin-left: 20px;
 margin-bottom:20px;
 clear:both;
}
</style>
</head>
<body>
<div id="container"> 
  <div class="nav">Navigation</div>
  <div id="middle"> 
	<div id="boxvert">content</div>
	<div id="boxvert2">content</div>
	<div id="boxhorz">content</div>
  </div>
  <div class="nav">Navigation</div>
</div>
</body>
</html>

Hope that helps.

Paul

**loadx** · Sep 7, 2004, 17:49

thanks for the heads up paul, it was 3am when i wrote that

However i will take your suggestions on board and remeber for next time, cheers.

**Paul O'B** · Sep 8, 2004, 01:22

thanks for the heads up paul, it was 3am when i wrote that

lol - I know the feeling

**GOLGO-13** · Sep 9, 2004, 16:59

thanks for the help guys!
i REALLY appreciate it, and hopefully i'll be completing my project this weekend!

**jammo** · Oct 15, 2004, 21:22

loadz & Paul O'B
im no newbie at HTML, but CSS? im tinkering with it more and more everyday.

now im going through many of my old designs and trying to convert them all from tables, to CSS positioning.

its members like you that assist all the rest of us to make our websites THAT much more compliant, and easy to update.

thanks guys!
and gals!

The SitePoint Forums have moved.

User Tag List

Thread: div / column layout problem

Thread Tools

Display

div / column layout problem

Bookmarks

Bookmarks

Posting Permissions