...

View Full Version : Css layout help



fluffdry
01-23-2007, 04:58 PM
I'm creating a css layout which I want to look like this:
http://i131.photobucket.com/albums/p307/beckheck/css.jpg

Column 3: Here I want an iframe.

I can't make this code I haven't enoguh experience. All I can get is this

<div id="centrering">
<div id="sidhuvud">pageheader</div>
<div id="kolumn1"> column1:<br>
</div>
<div id="kolumn2"> column2:<br>
</div>
<div id="kolumn3">
<p>column 3 <br>
hmpf</p>
</div>
</div>

css
body {margin: 0; padding: 0;}
#centrering {width: 450px; margin-right: auto; margin-left: auto;}
#sidhuvud {background: #CC99CC; padding: 10px; border-bottom: 0px solid #000000;}
#kolumn1 {float: left; width: 200px; padding: 10px;}
#kolumn2 {float: left; width: 200px; padding: 10px; border-left: 0px solid #000000;}
#kolumn3 {clear: right; justify; width: 200px; padding: 10 px; background: #cc99cc;}

please help me, I don't understand how column three can be below column 1, and not under it.

Excavator
01-23-2007, 05:36 PM
Hello fluffdry,
Have a look at this:

<!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>
<title>Revolution-Creations</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#centrering {
width: 450px;
margin: 0 auto;
overflow: hidden;
background-color: #66FF00;
}
#sidhuvud {
padding: 10px;
border-bottom: 0px solid #000000;
background-color: #6666FF;
}
#kolumn1 {
float: left;
width: 200px;
padding: 10px;
background-color: #000000;
}
#kolumn2 {
margin: 0 0 0 200px;
padding: 10px;
}
#kolumn3 {
float: left;
width: 200px;
padding: 10px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="centrering">
<div id="sidhuvud">pageheader</div>
<div id="kolumn1"> column1:<br />
</div>
<div id="kolumn2"> column2:<br />
</div>
<div id="kolumn3">
<p>column 3 <br />
hmpf</p>
</div>
</div>
</body>
</html>

Maybe now you can get your iframe working.

fluffdry
01-24-2007, 09:31 PM
thank you it works in the size you gave me but not if I make it bigger :confused:
If I make the centrering width 688px
the column1 width 505 px
column 3 width 505 px
and the frame in column3 505px too.

but when the width is changed to this, the third column just won't put the frame next to column 2, but below it. What's the problem? :(

I don't know how to solve this!

Excavator
01-24-2007, 09:34 PM
This will help figure out widths: http://www.w3.org/TR/REC-CSS2/box.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum