2 DIVs naast elkaar

Status
Niet open voor verdere reacties.
F

falcojugger

Gebruiker
Lid geworden
29 dec 2008
Berichten
279
Oke het probleem:

een wrapper, een content en een menu. in de volgende vorm:

HTML: 
<div id="header">
  Header
</div>

<div id="wrapper">

  <div id="menu">
   <p>Dit is het menu</p>
  </div>

  <div id="content">
    <p>Dit is de index</p>
  </div>

</div>

<div id="footer">
 <?php showcopyright(); ?>
</div>

Nou is het dus zo: hoe krijg ik div met id=menu naast div met id=content.
ik heb met float:left en float:right geprobeerd maar dan komt de copyright verkeerd.
ook heb ik de width aangepast, maar de andere div blijft er dan nog steeds onder.

hoe verhelp ik dit? (ps ik werk ook met css)

EDIT: css bijgevoegd op verzoek in chat.

Code: 
#menu{
text-align:left;
width:150px;
border:2px dotted red;
float:left;
}

#content{
float:left;
width:600px;
text-align:center;
border:2px solid yellow;
}

#footer{
position:fixed;
bottom:0px;
margin-top:25px;
text-align:center;
font-size:8pt;
font-family:Helvetica, Verdana, serif, sans-serif;
color:#050037;
}

met float: left en float:left komen de 2 div's wel goed naast elkaar, maar de footer komt weer naast de content, dat hoort ook weer niet
 
Laatst bewerkt:
als je van de CSS pagina nu eens dit maakt.

HTML: 
#container{
width: 750px;
margin: 0 auto;
}

#menu{
text-align:left;
width:150px;
border:2px dotted red;
float:left;
}

#content{
float:left;
width:600px;
text-align:center;
border:2px solid yellow;
}

#footer{
position:fixed;
bottom:0px;
margin-top:25px;
text-align:center;
font-size:8pt;
font-family:Helvetica, Verdana, serif, sans-serif;
color:#050037;
width: 750px;
float: left;
}


en van de html-pagina dit:

HTML: 
<div id="container">

<div id="header">
  Header
</div>

<div id="wrapper">

  <div id="menu">
   <p>Dit is het menu</p>
  </div>

  <div id="content">
    <p>Dit is de index</p>
  </div>

</div>

<div id="footer">
 <?php showcopyright(); ?>
</div>

</div>

dan heb je niet meer het probleem dat hij de footer naast de content plaatst.
en staat de content gewoon naast het menu
 
hij staat er nou inderdaad onder, maar ik wil de footer gecentreerd ten opzichte van de site.
als deze de eigenschap: float:left heeft kan ik de text niet centreren.
heb het nu zo:

HTML: 
#container{
margin:0 auto;
width:750px;
}

#menu{
text-align:left;
width:150px;
border:2px dotted red;
float:left;
}

#content{
float:left;
width:600px;
text-align:left;
border:2px solid yellow;
}

#footer{
position:fixed;
bottom:0px;
margin-top:25px;
text-align:center;
font-size:8pt;
font-family:Helvetica, Verdana, serif, sans-serif;
color:#050037;
float:left;
}

pagina =

HTML: 
<body>
<div id="header">
  Header
</div>

<div id="container">

  <div id="menu">
    <p>Dit is het menu</p>
  </div>

  <div id="content">
    <p>Dit is de index</p>
  </div>

</div>

<div id="footer">
 <?php showcopyright(); ?>
</div>

</body>
 
HTML: 
#menu{
text-align:left;
width:150px;
border:2px dotted red;
float:left;
}

#content{
float:left;
width:600px;
text-align:center;
border:2px solid yellow;
}

#footer{
position:fixed;
bottom:0px;
margin-top:25px;
text-align:center;
font-size:8pt;
font-family:Helvetica, Verdana, serif, sans-serif;
color:#050037;
clear: both;
}

De toevoeging clear:both aan je footer wil nog wel eens helpen.
 
PHP: 
<body>
  <div id="header">
    Header
  </div>

  <div id="container">

    <div id="menu">
      <p>Dit is het menu</p>
    </div>

    <div id="content">
      <p>Dit is de index</p>
    </div>

    <div id="footer">
      <?php showcopyright(); ?>
    </div>
  
  </div>
</body>

Door de footer in de wrapper te zetten, zou die gecentreerd moeten zijn t.o.v. de divs
 
tenminste dat dacht ik... ik test hem nou toevallig in Firefox, hier pakt hij de footer niet in het midden maar gewoon links. ik heb het op het moment zo:

mainstyle.css
Code: 
#footer{
width:800px;
position:fixed;
bottom:10px;
margin-top:25px;
text-align:center;
font-size:8pt;
font-family:Helvetica, Verdana, serif, sans-serif;
color:#050037;
clear:both;
}

het maakt niet uit of ik hem in de container zet of niet, in Firefox blijft het probleem dat hij links uit blijft lijnen.
 
Dat komt omdat de hele container links staat.

Als je de volgende regels aan je style van #content toevoegt, zou het hele deel gecentreerd moeten zijn:

PHP: 
position: relative;
left: -300px;
margin-left: 50%;

Hij zet de div nu de helft van het scherm naar rechts, en dan weer de helft van de breedte van het element naar links. Dan staat ie dus precies in het midden.
 
ik snap niet precies waar je die left: -300px vandaan haalt?
dit betekent dan wel dat hij, afhankelijk van beeldscherminstellingen, niet altijd in het midden staat of toch wel?
 
Jawel, hij staat dan altijd precies in het midden.

Hij zet hem 50% van de schermbreedte naar rechts. Dan staat dus de linkerrand van je div precies in het midden van het scherm.

Aangezien je div 600px breed is, moet je div nog 300px naar links zodat het midden van je div in het midden van het scherm staat.
 
waarom niet op de #container

margin: 0 auto;
dit is mi een mooiere methode

de container is dan de laag die alles in het midden houdt.

trouwens je footer een position: fix geven zou ik niet doen.

je 2 laagjes die je naast elkaar zet moet je gewoon allebei een float: left geven en de footer een clear: left geven.

check http://www.dicabrio.com Hier heb ik het ook toegepast. hier zie je 3 kolommen die alle 3 een float: left; hebben en mijn footer heeft een clear: left;
 
ik heb de footer buiten de container gehaald,

text-align:center; is de oplossing voor internet explorer
margin:0 auto; is de oplossing voor mozilla firefox

ik heb dus de footer nog een keer die margin:0 auto; gegeven die de container ook had, en op de een of andere manier werkt het nou wel.

zowel in firefox als in internet explorer. top
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan