CSS Forum

**andyp** · 02-11-2008, 08:45 PM

problem no.1: how do i make a website header div to stretch the entire width of the browser window. e.g look at webmaster-talks header.

problem no.2: if you take a look at http://ap-gfx.com/joomla , I have a leftcolumn class and a rightcolumn class. now I'm making a 4 column layout and i thought if i just arrange the in order it would work but it doesnt. It only works for the leftcolumn class. my source is ap-gfx.com/joomla/template/themes/default/index.tpl
I may not have been clear, look again at the site and on the right the word far right is closer to the center than just right, but i had arranged them so it was the other way round.

problem no.3: why doesnt W3C develop their own web browser and have OS's distribute them for free or even just have a W3C layout engine?

**jim.thornton** · 02-11-2008, 09:22 PM

Answer #1: set the width of the DIV to 100%

Answer #2: I don't understand what you mean.

Answer #3: Why re-invent the wheel?

**chrishirst** · 02-12-2008, 03:15 AM

#3 Amaya

**Mooofasa** · 03:22 AM

Remove left and right margin and padding from the body. The div will automatically expand/collapse.

Sample code:

Code:

.block, .end-block{
float: left;
margin-right: 20px;
width: 200px;
}
.end-block{
margin-right: 0;
}

HTML Code:

<div class="block"><p>Stuff here</p></div>
<div class="block"><p>Stuff here</p></div>
<div class="block"><p>Stuff here</p></div>
<div class="end-block"><p>Stuff here</p></div>

The W3C are developing their own browser. It's called Amaya (I hate it personally).

**andyp** · 02-12-2008, 07:58 AM

I thought i never explained it right

. in ap-gfx.com/joomla/index.php you will notice i have 2 boxes within a wrapper div. these two boxes are each held in a column div the column div used is;

HTML Code:

.leftcolumn
{
 width: auto;
 height: auto;
 float: left;
}

so these two columns are placed side by side. but when i try to do it with the two right columns it doesnt work.

HTML Code:

.rightcolumn
{
 width: auto;
 height: auto;
 float: right;
}

look at my html source and youll see that the text in the doc should be the other way round .

**Mooofasa** · 02-12-2008, 08:39 AM

You need to specify the width. Height: auto is needless.

**andyp** · 02-12-2008, 11:17 AM

it still hasnt solved my problem. if i need to explain it again i can

**Mooofasa** · 02-12-2008, 01:51 PM

If you could make a graphical representation of what you mean, it would be nice. I need diagrams and labels and the whole shebang to work out the smallest of problems. Possibly why the Bible never worked for me.

**jim.thornton** · 02-12-2008, 11:26 PM

I believe this is what you are looking for:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title></title>
<style type="text/css">
#container {
     width: 1000px;
	 height: 800px;
	 background-color: blue;
}

#col1 {
     width: 15%;
	 height: 800px;
	 background-color: red;
	 float: left;
}

#col2 {
     width: 35%;
	 height: 800px;
	 background-color: yellow;
	 float: left;
}

#col3 {
     width: 35%;
	 height: 800px;
	 background-color: green;
	 float: left;
}

#col4 {
     width: 15%;
	 height: 800px;
	 background-color: white
	 float: left;
}

#footer {
     width: 100%;
	 clear: both;
	 height: 100px;
}

</style>
</head>
<body>
<div id="container">
<div id="col1">&nbsp;</div>
<div id="col2">&nbsp;</div>
<div id="col3">&nbsp;</div>
<div id="col4">&nbsp;</div>
<div id="footer">&nbsp;</div>
</div>
</body>
</html>

You will have to adjust it to get it the way you want but you should be able to see the technique.

You should set a fixed height. Also, the width, because the auto will cause a div to center in the space provided.