html - CSS med 100% width problem - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #7935 @ 28.11.09 13:55

Hej CSS nørder

Jeg er lige startet med at sætte mig ind i CSS og stødt på et lille problem.
Jeg vil gerne lave en webside som har width:100%

En simplificeret CSS vil se således ud:

Kode

#LEFT{
	[b]width: 150px;[/b]
	float: left;
	margin: 2px;
}
#MIDDLE
{
	[b]width: ?!?!?;[/b]
	float: left;
	position: relative;
	margin: 2px;
}
#RIGHT
{
	[b]width: 200px;[/b]
	float: left;
	position: relative;
	margin: 2px;
}

og HTML delen således

Kode

<div id="LEFT">
</div>
<div id="MIDDLE">
</div>
<div id="RIGHT">
</div>

Hvordan får jeg min MIDDLE del til at tilpasse sig browserens bredde minus LEFT og RIGHT?

På forhånd tak for hjælpen

7 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #8773 @ 28.11.09 14:29

658

Der er flere måder at gøre det på, men en måde er som følger:

CSS kode

 #LEFT{
     width: 33%;
     float: left;
     margin: 2px;
 }
 #MIDDLE
 {
     width: 34%;
     float: left;
     margin: 2px;
 }
 #RIGHT
 {
     width: 33%;
     float: left;
     margin: 2px;
 }

på den måde får du tre lige store elementer..

Hvis du vil have dem med forskellige størelser, skal du jo så overveje hvor stor en procentdel du vil have dem.

Ellers burde følgende også virke:

CSS kode

 #LEFT{
     width: 150px;
     float: left;
     margin: 2px;
 }
 #MIDDLE
 {
     width: 100px;
     margin: 0 auto:
 }
 #RIGHT
 {
     width: 200px;
     float: right;
     margin: 2px;
 }

Koden er ikke testet

Bruger #6528 @ 28.11.09 17:01

255

tror den nemmeste måde at gøre det på er at sætte bredden på dine højre og venstre side og sætte deres position til absolute. så styrer du afstanten til kanten på dit content med margin.

Kode

#LEFT{
     position: absolute;
     top: 0;
     left: 0;
     width: 150px;
     margin: 2px;
 }
 #MIDDLE
 {
     margin: 0 200px 0 150px; 
     display: block;
 }
 #RIGHT
 {
     width: 200px;
     position: absolute;
     top: 0;
     right: 0;
     margin: 2px;
 }

Noget i den stil burde virke

Bruger #11506 @ 28.11.09 19:15

190

er det egenlig ikke den måde Udvikleren er lavet på?
Jeg har prøvet at trække deres CSS ud, men den er meget kryptisk, noget med noget float og noget med margin der trækker en float baglæns.
Smart trick, men det er jo en måde at vælge at lave et site på.

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#WRAPPER {
	float:left;
min-height:100%;
width:100%;
}
#LEFT{
	background-color:#000;
float:left;
margin-left:-100%;
width:174px;
}
#MIDDLE
{
	padding:0 330px 0 184px;
	background-color:#CCC;
}
#RIGHT
{
background-color:#000;
float:left;
margin-left:-320px;
width:320px;
}
-->
</style>
</head>

<body>
<div id="WRAPPER"><div id="MIDDLE">CONTENT</div></div>
<div id="LEFT">CONTENT</div>
<div id="RIGHT">CONTENT</div>

</body>
</html>

Indlæg senest redigeret d. 28.11.2009 19:16 af Bruger #11506

Bruger #2730 @ 30.11.09 09:28

1.626

Du skal lave en container, der holder dine tre kolonner, derefter skal du lave float:left på din left kolonne og give den en bredde, så skal du give float:right til din højre kolonne... så burde det virke se evt: http://www.maxdesign.com.au/presentation/page_layouts/

Bruger #7935 @ 28.11.09 14:46

Dit andet forslag er tæt på det jeg søger. Jeg vil have styr på bredden på venstre og hæjre del, mens det i midten skal være dynamisk.

Desværre fylder MIDDLE delen helt ud til kanten og højre del findes under MIDDLE.

Bruger #5620 @ 28.11.09 15:12

1.500

Jeg vil vove den påstand at det du ønsker kun kan laves med rigtige tabeller, med tags der pøver at emulere tables i css:
display:table
display:table-row
display:table-cell

Eller med CSS og javascript.

Bruger #7935 @ 28.11.09 17:12

Det hele klemmer sig sammen i venstre side nu...

Husk på jeg er helt ny i CSS

CSS med 100% width problem

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler