Spalter med divar

april 9, 2008 10:51 by webbaren

Här är ett problem som alla brukar lösa med tabellhantering. Men om du skall göra det på ett bra och riktigt sätt så skall du använda divar. Lösningen på detta är ett kommando som kallas "float".

 

Nedan ser du vad vi vill komma åt och även en lösning.

Detta lägger du i din html-sida:

<div class="ruta_1">
 <div class="left_1">
 <p>Spalt1</p>
 </div>
 
 <div class="right_1">
 <p>Spalt2</p>
 </div>
</div>

Och detta skall ligga in din CSS:

.ruta_1
{
width:400px;
height:200px;
background:#b6b6b6;
padding:5px;
}

.left_1
{
width:220px;
background:#FFF;
height:100%;
text-align:center;
float:left;
}

.right_1
{
width:160px;
background:#FFF;
height:100%;
text-align:center;
float:left;
margin-left:8px;
}

p
{
font-family:verdana, arial;
font-size: 11px;
}

När detta är gjort har du ett lika fint resultat som ovan.


Currently rated 1.0 by 2 people

  • Currently 1/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Taggar: spalter, div, css
Kategorier: CSS | Webdesign
E-mail | Permalink | Comments (0) | FeedRSS comment feed

Comments

Add comment


 

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]