[Løst] Sidestille 2 divs.

[etse]

Jeg ønsker å side-stille 2 divs slik at jeg har en meny på høyre siden og resten av innholdet på venstre side. Jeg har googlet mye og kommet over mange ulike løsninger og har kommet opp med følgende til nå:

 

HTML:

<div class="main_wrapper">
	<div class="content">
		<h3>Content DIV</h3>
	</div>

	<div class="sidebar">
		<h3>Right sidebar</h3>
	</div>

	<div class="clear"></div>
</div>

 

CSS

div.main_wrapper
{
position: relative;
margin: 0;
width: 100%;
background-color: purple;
}

div.content
{
float: left;
margin-top: 10px;
margin-right: 20px;
background-color: white;
}

div.sidebar
{
float: right;
width: 180px;
padding-left: 15px;
background-color: red;
}

.clear {
  height: 0;
  font-size: 1px;
  margin: 0;
  padding: 0;
  line-height: 0;
  clear: both;
}

 

Alt fungerer greit med unntak av en ting: Content diven fyllet ikke ut alt det tomme rommet. Jeg ønsker at den skal ha en dynamisk størrelse slik at om jeg endrer størrelsen på vinduet så blir denne diven større/mindre for å kompensere. Slik den er nå dekker ikke "content" hele bredden, og om vinduet blir for lite hopper "sidebaren" ned til neste linje før content endrer størrelse.

 

Noen som kunne hjulpet meg her?

[radivx]

Hvis man bruker float vil ikke div'ene ta opp mer plass i bredden enn nødvendig.

Dette kan løses med å sette min-width og eventuelt også min-height.

 

Et alternativ er å benytte seg av:

 

div.content
{
       display: inline-block;
       margin-top: 10px;
       margin-right: 20px;
       background-color: white;
}


div.sidebar
{
       display: inline-block;
       width: 180px;
       padding-left: 15px;
       background-color: red;
}

 

Merk at inline-block tar hensyn til whitespace.

HTML koden må derfor være uten whitespace:

 

<div class="main_wrapper">
               <div class="content">
                       <h3>Content DIV</h3>
               </div><div class="sidebar">
                       <h3>Right sidebar</h3>
               </div>
</div>

[etse]

Hei.

 

Takker for forslaget. Prøvde å endre til "inline-block", men det eneste som da skjedde var at sidebaren som skal være til høyre la seg helt inntil "content" diven på venstre side. Denne ville fortsatt ikke fylle ut wrapperen.

 

Slik vil jeg det skal se ut:

 

Slik ser det ut:

[radivx]

Målet er at siden skal fylle skjermen uansett?

Mens en meny på xxx piksler skal holde seg på høyresiden?

 

Hva med absoluttposisjonering?

Margin-right i content er for å hindre at ting legger seg bak menyen.

 

div.content
{
       display: block;
       margin-top: 10px;
       margin-right: 220px;
       background-color: white;

}


div.sidebar
{
       position: absolute;
       top: 0;
       right: 0;
       display: block;
       width: 200px;
       padding-left: 15px;
       background-color: red;
}

[agm]

Google CSS Faux Columns eller CSS Holy Grail.

 

Da får du opp noen treff som kan hjelpe deg:

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

 

http://en.wikipedia.org/wiki/Holy_Grail_(web_design)

 

http://www.alistapart.com/articles/holygrail

[etse]

Målet er at siden skal fylle skjermen uansett?

Mens en meny på xxx piksler skal holde seg på høyresiden?

 

Hva med absoluttposisjonering?

Margin-right i content er for å hindre at ting legger seg bak menyen.

 

div.content
{
       display: block;
       margin-top: 10px;
       margin-right: 220px;
       background-color: white;

}


div.sidebar
{
       position: absolute;
       top: 0;
       right: 0;
       display: block;
       width: 200px;
       padding-left: 15px;
       background-color: red;
}

Takker, ved å sette blokk og bruke absolutt-posisjon på kolonnen til høyre gikk det veldig bra og ting fungerer som jeg ønsket. Takker for hjelpen =)