HTML Forum

**ehentai** · 08-26-2007, 08:49 AM

Greetings.

The layout above is fairly easy to make with tables (and compatible with all browsers).

But how can I make the layout with CSS only? That is, what should be inside the style="" for Div 1 to 4 and Global Div?

The size of divs is aproximated, it isn't exact, so, if possible, how can this be done with relative values (% - percentage) and not with absolute values (pixels)?

Note: The thin black lines, indicate what should be the same height.

**LadynRed** · 08-26-2007, 09:19 AM

Sooo, basically you want someone to do your work FOR you ?

You need to learn about floats.
Assuming you want the red column to be full height, you need to read the stickie about achieving 100% height.
If you want the blue one to be a footer that stays at the bottom, you're probably going to need another div inside global that contains everything but the blue one.

**JamieLewis** · 08-26-2007, 09:31 AM

Source:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="english"> 
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> </head>
<body>

<div id="global">
<div id="container2">
<div id="container1">
    <div id="one">Div 1</div>
    <div id="two">Div 2</div>
</div>

<div id="three">Div 3</div>
</div>
<div id="four">Div 4</div>

</div>
 
</body>
</html>

Style:

Code:

#global{
width:100%;
height:500px;
border:1px solid #000;
float:left;
}

#container1{
width:60%;
height:85%;
float:left;
}

#container2{
width:85%;
height:100%;
float:left;
}

#one{
width:30%;
height:60%;
background:#0f0;
float:left;
}

#two{
width:40%;
height:25%;
margin-top:23%;
background:#ff0;
float:right;
}

#three{
width:80%;
height:15%;
background:#00f;
clear:left;
}

#four{
width:15%;
height:100%;
background:#f00;
float:right;
}

Should work. Only tested in Firefox and Konqueror. There is a slight issue with Div 2 not aligning to Div 1 in each of the browsers which will need further looking at, but the basic idea is there.

Jamie

**thevirus** · 08-26-2007, 01:06 PM

Mind if I ask why you would want something to be coded in just css instead of css and html!?

**JamieLewis** · 08-26-2007, 01:11 PM

Quote:

Mind if I ask why you would want something to be coded in just css instead of css and html!?

I think you misunderstood. He wanted the design to made using HTML and CSS but WITHOUT the use of tables (which is common design practice)

Jamie

**mackaltman** · 08-26-2007, 05:10 PM

I could easily do it, but to tell you the truth your drawing is really confusing to me. As far as using percentages for widths, I would never recommend it. You can't 100% control the layout of the design with them. And just to back up Jamie, thevirus if you're still using tables to design websites you're way behind.

**ehentai** · 06:58 PM

I tried doing what Jamie did, but with fixed values:

Code:

#global{
width:580px
height:408px;
float:left;
}

#container1{
width:385px;
height:338px;
float:left;
}

#container2{
width:500px; /* global.width - four.width */
height:408px;
float:left;
}

#one{
width:120px;
height:240px;
background:#0f0;
float:left;
}

#two{
width:150px;
height:100px;
vertical-align: bottom; /* margin-top */
background:#ff0;
float:right;
}

#three{
width:468px;
height:68px;
background:#00f;
clear:left;
}

#four{
width:80px;
height:408px;
background:#f00;
float:right;
}

But strangely, the #global div (the outer one) doesn't stay with 580px :/ It goes past the 100% of my layout width (more than 900px)

Edit: OK, it seems that with fixed size it's better to use float:left for div #four

**clexmond** · 08-26-2007, 10:48 PM

Seriously, as a Dr. Turk (Scrubs) once said "Learn by doing." You're going to get a whole lot better at CSS by doing it yourself than you will be having other people do it for you.

**mackaltman** · 08-27-2007, 08:55 AM

To tell you the truth clexmond, you aren't really paying attention to the exercise at all. It's just that an "exercise" he is listing it to test out other's abilities and see who can and can not do it. They are the ones learning, not him.

enhentai, I said that fixed values are better than percentages. You don't want to risk your layout shooting all the way over with unsecured values of 50-100%. Those are the worst. If you are designing for a client, you want to be able to show them something and reassure them that this is the only output anyone will get. You don't want to go in a room and say, alright here we go, and you put up 20 easels and put up 20 boards.

Then you go as to explain, "This one represents a 800x600 browser window with Internet Explorer, this one 1024x768 browser with IE, this one with 800x600 with Firefox, etc." It's unnecessary and a proven task to not get hired for a job again.

**LadynRed** · 08-27-2007, 02:52 PM

Quote:

It's just that an "exercise" he is listing it to test out other's abilities and see who can and can not do it. They are the ones learning, not him.

I didn't read it that way.. I think he wanted someone to do it FOR him.

Quote:

I said that fixed values are better than percentages.

I can't really agree with that, not for all sites and situations. You can use percentages effectively and limit how far something will stretch w/o getting really ugly at higher resolutions. It just takes a bit more planning and skill. The point would be to have it look good at a minimum and a maximum, yet still look the way the client wants it across the board.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!