Hej alla CSS-gurus, nu får ni en utmaning! Tror jag...
Jag har två divar bredvid varandra, med float:left/right. I den högra diven har jag ytterligare tre divar med float:left och fast bredd. Jag skulle vilja få en lagom bredd på den högra kolumnen, med t.ex. max-width:45% och när man minskar webbläsarfönstret hamnar de inre divarna under varandra och den högra ytterdiven får en bredd som baseras på hur många innerkolumner som står bredvid varandra. Nu vill jag dessutom att den vänstra diven ska få en bredd som är webbläsarfönstret minus den högra divens bredd. Är dett möjligt med enbart HTML/CSS?
Lite snurrig förklaring kanske, är det för krångligt att förstå kan jag försöka skissa en bild.
....
Posta koden så blir det lättare.
joserMedlem sedan mars 20021 152 inlägg Pröva nånting sånt här:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#left {
float: left;
border: 1px solid;
}
#right {
float: right;
max-width: 45%;
border: 1px dashed;
}
* html #right { /* IE6 har inte max-width */
width: 45%;
}
#right1st,
#right2nd,
#right3rd {
float: left;
width: 100px;
height: 150px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="right">
<div id="right1st">1</div>
<div id="right2nd">2</div>
<div id="right3rd">3</div>
</div>
<div id="left">
<p>Lorem ipsum dolor sit amet consectetuer habitant amet elit Aenean rutrum. Justo elit Nulla tellus convallis elit Integer lorem tristique magnis ut. Justo condimentum Maecenas facilisi est Curabitur malesuada nunc enim quis condimentum. Aenean Quisque lobortis et Curabitur elit elit id Curabitur Ut laoreet. Lacinia dui nulla tempor id tincidunt convallis.</p>
<p>Pellentesque tempus tempor est vel laoreet laoreet interdum nibh id dui. Quis Lorem porttitor consectetuer Vestibulum elit egestas Vivamus In et amet. Laoreet semper odio eros libero habitant consectetuer tempus lorem pede Curabitur. Malesuada ipsum eget id porta leo id Cras libero dui id. Vestibulum id convallis pretium montes congue tellus ante.</p>
</div>
</body>
</html>
