LP_MAXI
Roosweb
chrillemeterWidth 100% -335px?
Tjena tjena! Jo det är som så här att jag behöver lite hjälp angående att ha en width på 100% minus en annan div så att den inte överskrider skärmens bredd...
Exempel:
@charset "utf-8";
/* CSS Document */
html {
width:100%;
}
body {
width:100%;
margin:0;
background-color:#000000;
padding:0;
}
#columns {
width:100%;
height:500px;
}
#column_left {
width:335px;
float:left;
height:500px;
}
#column_right{
width:100%
height:500px;
float:left;
}
Och sedan html:en
<html>
<body>
<div id="columns">
<div id="column_left"></div
<div id="colulm_right"></div
</div>
</body>
</html>
Det som kommer hända med ovanstående kod är att bredden på diven "columns" kommer att bli 1024px + 335px (om man har en 1024px bred skärm), men det jag vill bredden på column_right ska bli 1024 - 335 alltså 689px.
Jag antar att detta endast kan lösas med javascript men jag är osäker, går det att fixa i css:en?
Hoppas att ni förstår vad jag menar!
\\Bratt
| Skriv ut
1. Ta bort width: 100% uppfyller absolut inget på en div eftersom den är 100% by default, och body är också 100% (däremot kan du 0:a margin och padding t ex för att verkligen få hela sidans arbetysyta)
2. Ange alltid vilken doctype du använder dig av, olika doctypes har olika standarder när det gäller CSS
3. Om jag har förstått det hela rätt så är det en helt vanlig vänster + höger container du vill få.
Jag hade gjort (med XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fubar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html {
background: #000;
margin: 0;
padding: 0;
color: #fff;
}
#column_left {
width: 335px;
float: left;
height: 500px;
background: #f00; /* test */
}
#column_right {
margin-left: 335px; /* same width as #column_lefts total sum of: width, margin-left, margin-right, padding-left, padding-right */
background: #f0f; /* test */
height: 500px;
}
//-->
</style>
</head>
<body>
<div id="columns">
<div id="column_left">a</div>
<div id="column_right">b</div>
</div>
</body>
</html>
Man tackar! funkar hur bra som helst!