Problem i kode til 3 kolonner
I min kode nedenfor har jeg 3 kolonner som umiddelbart fremstår korrekt. Problemet kommer, når jeg tilføjer tekst som ikke kan stå i bredden af f.eks. 180px. I stedet for at cutte teksten af lave linieskift ødelægges layoutet. Dette sker så vidt jeg kan se i både left-kolonne og center-kolonne. Right-kolonne ser derimod ud til at fungere korrekt.Kan I hjælpe mig?
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: white;
text-align: center;
}
#page {
background: lightgrey;
width: 780px;
text-align: left;
margin: 0 auto;
}
#top {
background: red;
}
#menu {
width: 180px;
float: left;
}
#content {
width: 420;
float: left;
}
#content_right {
width: 180px;
float: right;
}
#bottom {
background: lightyellow;
clear: both;
}
#clear {
clear: both;
}
#wrapper {
}
</style>
</head>
<body>
<div id="page">
<div id="top">
top her
</div>
<div id="wrapper">
<div id="menu">
menu here
</div>
<div id="content_right">
content rightcontent
</div>
<div id="content">
content here
</div>
<div id="clear"></div>
</div>
<div id="bottom">
bottom her
</div>
</div>
</body>
</html>
