litt n00bsih spørsmål ang. divs istedet for tables

[MC2]

hei

 

har nettopp bestemt meg for å gå over til xhtml og div basert design istedet for html og table basert.

 

er ikke altfor smart på css og det vært en stund siden jeg har drevet med design, så jeg lurer på: når en bruker float left på to divs som skal være ved siden av hverandre. den ene har en fast størrelse og jeg vil at den andre skal ta opp resten av bredden...

 

enkelt ikke sant? men får det ikke til...

<div style="width:100%">
<div style="float:left; min-width:200px;">
Masse crap osv...
</div>
<div style="flat:left; width:100%;">
Diven som skal fylle opp resten av siden
</div>
</div>

 

glad om noen kunne hjelpe.

 

EDIT: kanskje jeg burde legge til at når jeg gjør dette (overnfornevnte) så blir den diven som skal fylle resten av siden plassert under den andre...

Endret 28. desember 2005 av MC2

[mikk-]

Det fungerte utmerket her.

 

Men jeg skjønner ikke logikken bak koden din helt. Jeg ville brukt width i stedet for min-width. Den skal da tross alt aldri være større? Og på den diven som skal være til høyre, trenger du ikke egentlig å oppgi noe som helst. Du trenger forresten heller ikke den diven som er utenfor de to andre. Ikke foreløpig iallfall.

 

Nedenforstående kode gjør akkurat samme nytte, såvidt jeg kan se.

<div style="float:left; width:200px;">
Masse crap osv...
</div>
<div>
Diven som skal fylle opp resten av siden
</div>

 

Håper forresten at style-attributtene bare er brukt for å gjøre det enkelt å vise fram her. Mye smartere å bruke klasser når du skal lage siden.

Endret 29. desember 2005 av Mikka

[mikk-]

(dobbelpost..)

Endret 29. desember 2005 av Mikka

[MC2]

ok, takk for svar.

 

ja, style attr er bare brukt for at det var enklere å vise frem.

 

jeg brukte min-width for at hvis den diven fylles opp med noe som er bredere enn 200px så vil jeg at den skal utvide seg.

 

og det er ikke helt sånn jeg vil ha det... hadde jeg brukt tables vill jeg ha gjort sånn:

<table width="100%">
<tr>
<td width="200px">Masse crap osv...</td>
<td width="100%">dette skal fylle opp resten av siden</td>
</tr>
</table>

 

det skal se omtrent sånn ut:

+--------------------+-----------------------------------------------------+
|                    |                                                     |
|                    |                                                     |
|                    |                                                     |
|    crap            |                                                     |
+--------------------+                                                     |
                     |                  resten av siden                    |
                     |                                                     |
                     +-----------------------------------------------------+

 

håper du skjønner hva jeg mener.

Endret 29. desember 2005 av MC2

[mikk-]

Da skulle du i såfall brukt max-width, men det gir ikke mye mening her. Tror ikke du trenger noe mer enn width.

 

Lenge siden jeg har holdt på med dette, men du får prøve denne koden:

<div style="float:left; width:200px;">
crap
</div>
<div style="width: 100%; margin-left: 200px;">
resten av siden
</div>

[MC2]

takk, men den koden funket ikke. den bare flyttet alt 200px til høyre. kom litt nærmere med postition:absolute og margin:0 0 0 200px osv.

 

sånn ser koden ut:

 

 

<div class="page_wrap">

<div class="body_cont">

 <div class="menu_cont">
 	<ul>
   en 200px bred meny
 	</ul>
 </div>

 <div class="body_in">

 	masse masse stuff som skal fylle opp resten

 </div>

</div>

</div>

 

og css delen:

ul {
 padding:10px;
 list-style-position:inside;
 border:1px solid #CCCCCC;
 background-color:#FFFFFF;
}

.page_wrap {
 width:100%;
}
.body_cont {
}
.menu_cont {
 height:100%;
 width:200px;
 margin:5px 10px 5px 0;
 float:left;
}
.body_in {
 float:left;
 background-color:#FFFFFF;
 position:absolute;
 margin:5px 20px 0 210px;
 border:1px solid #CCCCCC;
 padding:10px;
 font-size:1.1em;
 text-align:justify;
}

 

 

problemet nå er at hvis det som er inni body_in ikke mer noe mye så fyller ikke diven opp resten av siden... og hvis jeg prøver med width:100% på body_in så blir diven like bred som skjermen, men 200px utenfor på høyreside pga margin-left:200px;

 

 

dette begynner å bli små irriterende....