HTML/CSS hjälp
Hej, jag håller på med en enklare hemsida åt en bekant. Jag skriver koden för hand i Notepad++.
Vad jag försöker få till är en sida med ett antal efterföljande rutor med innehåll. Överst har jag navigering och lite annat som fungerar som det ska och i botten har jag en footer som också fungerar. Emellan dessa så har jag ett antal divar som egentligen bara är rutor med innehåll. Det som ska presenteras är produktpaket så i varje ruta har jag typ en rubrik, en lista med vad som ingår, lite text som beskriver närmare och en textruta. Tanken är att rubriken ska vara överst och resten av innehållet ska ligga bredvid varandra under rubriken, typ i spalter.
Problemet är att jag inte kan få de tre spalterna att ligga bredvid varandra utan att själva rutan bara hamnar runt rubriken. Sätter jag divarna som utgör spalterna till float:left så hamnar de utanför rutan, sätter jag dem till något annat hamnar de i rutan men inte bredvid varandra. Jag skulle kunna sätta själva rutan till en fast höjd men då måste jag ha olika för varje (då innehållet varierar i längd) och det är alldeles för jobbigt.
Koden ser ut typ så här (HTML):
<div id="content">
...
<div class="produkter">
<a id="produkt1"><h2 class="produktRubrik">Produktpaket 1</h2></a>
<ul class="prodLista1">
<li>bla bla</li>
<li>bla bla</li>
</ul>
<p class="prodInfo1">Närmare information....</p>
<p class="prodInfo2">Information om beställning osv....</p>
</div>
Och sen kommer ett antal till som ser typ likadana ut
</div>
Och CCS:en ser ut ungefär så här:
#container {
margin-left:auto;
margin-right:auto;
width:1024px;
background-color:hsla(120,0%,100%,0.8);
}
.produkter {
margin:20px;
padding:10px;
background-color:hsla(120,0%,100%,0.8);
box-shadow: 0 0 20px rgba(0,0,0,0.4);
height:auto;
}
.produktRubrik {margin:left35px;}
.prodLista1 {
width:260px;
/*här har jag prövat med exempelvis float:left, olika positions osv. men det hjälper inte*/
}
.prodInfo1 {
margin-left: 10px;
padding: 10px;
border-left: 1px solid grey;
width: 300px;
top:1em;
/*även här har jag prövat med float, olika positions och liknande men till ingen hjälp.
}
.prodInfo2 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
border: 2px solid #9D906F;
border-radius: 0.5em;
background-color: lightgrey;
padding: 20px;
width: 200px;
top:2em;
/*även här har jag prövat med float, olika positions och liknande men till ingen hjälp.
}
Vad är det jag missar? Om man har ett antal objekt innanför div-taggar så borde ju diven omsluta objekten, eller? Sätter jag ett av objekten till float:left så hamnar det utanför rutan hur jag än gör. Alla tips välkomnas.
