Hejsa
Er der nogen som kan hjælpe mig med at få styr på nedenstående design? Jeg
vil gerne have div.page-another-container placeret lige under (25 pixels)
de tre midter-kolonner. Derfor har jeg efter anbefaling lavet en div.clear
med clear: both, da div.page-another-container ellers kun ville positionere
sig i forhold til den midterste af de tre midterkolonner. Anvendelsen af
clear: both giver dog problemer med de yderste kolonner (left- og right-column),
da div.page-another-container bliver positioneret under disse og ikke de
tre midter-kolonner. Håber det gav mening
http://www.bullamanka.dk/test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="
http://www.w3.org/1999/xhtml" lang="dk">
<head xmlns="">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css">
body
{
margin: 10px 0 10px 0;
padding: 0;
text-align: center;
}
#page
{
background-color: #FFFFFF;
margin: 0 auto;
text-align: left;
width: 740px;
}
#page-left-column
{
background-color: #E2E2E2;
float: left;
height: 300px;
width: 200px;
}
#page-center-column
{
margin: 0 210px 0 210px;
}
#page-right-column
{
background-color: #E2E2E2;
float: right;
height: 300px;
width: 200px;
}
#page-center-column-left-column
{
background-color: #B9B9B9;
float: left;
width: 100px;
}
#page-center-column-right-column
{
background-color: #B9B9B9;
float: right;
width: 100px;
}
#page-center-column-center-column
{
background-color: #E2E2E2;
margin: 0 110px 0 110px;
width: 100px;
}
#page-another-container
{
background-color: #D9D9D9;
height: 100px;
margin-top: 24px;
}
#clear
{
clear: both;
padding-top: 1px;
}
</style>
</head>
<body>
<div id="page">
<div id="page-left-column">
left
</div>
<div id="page-right-column">
right
</div>
<div id="page-center-column">
<div id="page-center-column-container">
<div id="page-center-column-left-column">
left left left left left left left left left left left left left left
left left left left left left
</div>
<div id="page-center-column-right-column">
right right right right right right right right right right right right
right right right right right right right right
</div>
<div id="page-center-column-center-column">
center center center
</div>
</div>
<div id="clear">
<div id="page-another-container">
another
</div>
</div>
</div>
</div>
</body>
</html>