...

View Full Version : 2 Div's above eachother on the left and another one on the right.



Griepzooi
11-19-2008, 03:10 PM
Hey you guys,

I'm just learning this CSS a bit, but i've encountered a problem whilst trying to make a site. I'm trying to get 2 div's on the left side above each other and then a content div on the right. I was wondering if anybody could help me with this and if so, maybe give a little explanation what the code does wich i have to apply so i could lean a bit.

I've got a screenshot of what i mean over here http://s4.tinypic.com/9lh351.jpg, and the code i'm using is :


#container {
height:600px;
width:800px;
background-color:#fcf2d9;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

#inner {
height:493px;
width:780px;
background-color:#e9d6a6;
margin-left:8px;
margin-top:2px;
}

#menu {
height:25px;
width:762px;
background-color:#bfa9d8;
margin-left:7px;
margin-top:9px;
}

#left {
height:235px;
width:187px;
background-color:#fcf2d9;
margin-left:7px;
margin-top:6px;
float:left;
}

#bottom left{
height:194px;
width:187px;
background-color:#fcf2d9;
margin-left:7px;
margin-top:7px;
float:left;
}

#content right {
height:436px;
width:560px;
background-color:#d2ba7c;
margin-left:10px;
margin-top:6px;
float:right;
}

#header {
height:60px;
width:304px;
background-color:#fcf2d9;
margin-left:141px;
margin-top:10px;
margin-bottom:2px;
background-image:url(images/header.jpg)
}


Thanks in advance.

abduraooft
11-19-2008, 03:26 PM
I'd recommend you to have a look at http://bonrouge.com/2c-hf-fluid.php to make a good 2 column layout.

Griepzooi
11-19-2008, 03:45 PM
Looked at it, but cant figure out how i can implement that in my code....
Do you mean its impossible with the code i wrote?

Excavator
11-22-2008, 09:00 PM
Looked at it, but cant figure out how i can implement that in my code....
Do you mean its impossible with the code i wrote?

Hello Griepzooi,
Looks like you've taken your code down. If you'd still like some help, post what you've got so far.
A test url would even be better.

GardenGnome2
11-23-2008, 02:21 AM
Maybe try adding to your 'inner' height.

Excavator
11-23-2008, 05:45 AM
Maybe this will get you started:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Full height 3-column with header and footer</title>
<meta name="" content="authored by http://www.nopeople.com/Design/" />
<style type="text/css">
html, body {
text-align: left;
font: 100% "Comic Sans MS";
color: #FC0;
text-decoration: none;
background: #99FFFF;
}
* { /**this zeros out default margins and padding on everything**/
margin: 0;
padding: 0;
border: none;
}
#container {
height: 600px;
width: 780px; /**the padding adds to the width**/
background: #fcf2d9;
margin: 20px auto;
padding: 10px 0 10px 0; /**this is an easier way to position #inner**/
}
#header {
height: 60px;
width: 304px;
margin: 0 0 2px 141px; /**shorthand. Goes clockwise: top right bottom left**/
background: #fcf2d9 url(images/header.jpg);
}
#inner {
height:493px;
width:780px;
background-color:#e9d6a6;
}
#menu {
height: 25px;
width: 762px;
background: #bfa9d8;
margin: 9px 0 0 7px;
}
#left {
height: 235px;
width: 187px;
background: #fcf2d9;
margin: 6px 0 0 7px;
float: left;
}
#bottom_left{ /**id/class can't have spaces**/
height: 194px;
width: 187px;
margin: 6px 0 0 7px;
float: left;
clear: left; /**moves the float below #left**/
background: #fcf2d9;
}
#content_right {
height: 436px;
width: 567px;
background: #d2ba7c;
margin: 6px 0 0 201px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
(header)
</div>
<div id="inner">
<div id="menu">
(menu)
</div>
<div id="left">
(left)
</div>
<div id="bottom_left">
(bottom_left)
</div>
<div id="content_right">
(content_right)
</div>
<!---closes inner--></div>
<!--closes container--></div>
</body>
</html>

It's just two columns really. Left is floated left, clear:left; forces the bottom_left down, #content_right is margined over. I wrote comments in the CSS.

Griepzooi
12-01-2008, 02:52 PM
Hi Excavator, thank you very much! Works great now!!
Also thanks for the comments, now I can understand it a bit better :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum