...

View Full Version : Resolved DIV layout



cactuscake
02-26-2009, 08:35 PM
This seems like it should be really simple to solve, but I can't find the answer anywhere.

I'm trying to get the two divs in the middle to sit side by side. I've managed to do it with absolute positioning, and/or float, when the whole set is left aligned... but these attributes end up putting the divs in the wrong place when I try to center the whole set within a container div.

Here's the code so far:



<html>
<head>
<title></title>
<style type="text/css">
.cont {
}
.head { background-color: purple;
max-width: 1000px;
}

.left { position: static;
width: 200px;
background-color: red;
}

.main { position: static;
max-width: 790px;
background-color: blue;
}

.foot { position: relative;
max-width: 1000px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="cont" align="center">
<div class="head">Stuff at top</div>
<div class="left">Stuff at left</div>
<div class="main">Stuff at right</div>
<div class="foot">Stuff at bottom</div>
</div>
</body>
</html>

jcdevelopment
02-26-2009, 08:40 PM
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edit Page</title>
<style type="text/css">
.cont { width:1000px;
}
.head { background-color: purple;
max-width: 1000px;
}

.left { float:left;
width: 200px;
background-color: red;
}

.main { float:right;
max-width: 790px;
background-color: blue;
}

.foot { height:200px;
max-width: 1000px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="cont" align="center">
<div class="head">Stuff at top</div>
<div class="left">Stuff at left</div>
<div class="main">Stuff at right</div>
<div class="foot">Stuff at bottom</div>
</div>
</body>
</html>

try that!

cactuscake
02-26-2009, 08:47 PM
Hmm, that seems to make it ignore the container div center align. I want the whole set of divs to sit in the center of the page, not the left.

Like this page (http://bonrouge.com/2c-hf-fixed.php), but with div widths that shrink when the window area is less than 1000px.

BoldUlysses
02-26-2009, 08:54 PM
Hi cactuscake,

Have a go with this:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edit Page</title>

<style type="text/css">

.cont {
max-width: 1000px;
margin:0 auto;
}

.head {
background-color: purple;
}

.left {
float:left;
width: 200px;
background-color: red;
}

.main {
float:right;
max-width: 790px;
background-color: blue;
}

.foot {
height:200px;
max-width: 1000px;
background-color: yellow;
}

</style>

</head>
<body>

<div class="cont">
<div class="head">Stuff at top</div>
<div class="left">Stuff at left</div>
<div class="main">Stuff at right</div>
<div class="foot">Stuff at bottom</div>
</div>

</body>
</html>

Of note:

1. Cleaned up your code formatting--it was really hard to read with the tabbing scheme you had in place.
2. Removed the align=center from your HTML. Layout belongs in the CSS, not in the markup.
3. Used the margin:0 auto method to center your page and put the max-width on your container. By default divs (and other block-level items (http://www.webdesignfromscratch.com/css-block-and-inline.php)) will expand to 100% the width of their containing element unless given an explicit width).

You should know that min- and max-widths and heights have some cross-browser compatibility issues (http://www.quirksmode.org/css/width.html) (IE6 doesn't like them).

cactuscake
02-26-2009, 09:05 PM
Matt,

Thanks, that works! At least, it does in FF and Safari. I'm on a Mac so my IE testing platforms are somewhat limited. I have an IE6 emulator that runs on WineHQ, when I view the page on that it seems to throw away the max-width attribute and fills the whole window... does it do this on the real version of IE too? *edit* looks like you already answered this, I need to read more carefully */edit*

Sorry about the code tabbing, it was tidier in the editor I'm using but messed up when I pasted it into the forum message thing.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum