2 replies [Last post]
dapop
dapop's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-05-10
Posts: 9
Points: 14

hey,

i am trying to get a 3 box layout, 2 boxes on top of each other on the left and then one main content box on the right, but im having a bit of trouble.

Here is a picture in dreamweaver (Image), I want the box named ss2 below ss1 on the left and the have ss3 off to the right, all contained in the wrapper. i can get ss1 and ss3 together fine, its just bringing ss2 that messes everything up Sad .

here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" title="Stylesheet" href="style.css" /> 
 
</head>
 
<body>
 
<div id="wrap">
 
<div id="ss1">
ss1
</div>
 
<div id="ss2">
ss2
</div>
 
<div id="ss3">
ss3
 
</div>
</div>
</body>
</html>

and here is the css:

#ss1{
width: 220px;
height: 275px;
background-image: url(images/curvtopmenu.png);
background-repeat: no-repeat;
color: red;
float: left;
clear: left;
margin: 0 auto;
}
 
#ss2{
width: 220px;
height: 275px;
background-image: url(images/curvtopmenu.png);
background-repeat: no-repeat;
color: red;
float: left;
clear: left;
margin: 0 auto;
}
 
#ss3{
width: 750px;
height: 550px;
background-color: #0F0;
color: red;
float: right;
clear: right;
margin: 0 auto;

Thanks,

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

You want ss1 and ss2 to float

You want ss1 and ss2 to float left and the content of ss3 to flow from the top to the bottom of the page?

If so you could contain ss1 and ss2 in a div, float the div and leave the content to flow. Adjust the left margin of the content to move it from under the float and don't bother giving it a width or height. If you want an overall fixed width, throw them all in a div and size that containing divs width.

dapop
dapop's picture
Offline
newbie
Last seen: 11 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-05-10
Posts: 9
Points: 14

Yeah, I just wrapped ss1 and

Yeah, I just wrapped ss1 and ss2 in another div, then floated it left and cleared both, works fine now.

thanks for help Smile