krijg mijn div's niet langs elkaar

[joostvdh]

Het gaat hierbij om div 7 en 8 de totale lengte van de divs langs elkaar moet 780 worden. Maar op een of andere manier krijg ik ze niet juist langs elkaar. Wie kan me er in verder helpen?

[CPP]#div7{
margin-right:auto;
margin-left:auto;
background-color: #EF1787;
height:500px;
width:580px;}
#div8{
float: right;
margin-right:auto;
margin-left:auto;
background-color: #EF1787;
height:500px;
width:200px;}
#footer{
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:780px;}[/CPP]

 

[peter vazed]

Voeg voor je divs en border toe,
om te zien wat er gebeurt.

Bovendien zul je met een clear both moeten werken na div 8
om een geforceerde break te krijgen.

Ik neem aan, dat het geheel in een container zit.

 

[joostvdh]

Sorry maar ben écht een leek daarin, zou iemand het me misschien anders uit kunnen leggen, dmv van een voorbeeld of aanpassing?

Bedankt

 

[joostvdh]

Ik heb ondertussen een border geplaatst om div7 en div8 maar tot op heden nog geen resultaat.

Hierbij de CSS:

[CPP]<style type="text/css">
#div1{
position:relative;
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:780px;}
/*#div2{
position:relative;
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:126px;}
#div3{
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:126px;}
#div4{
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:126px;}
#div5{
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:126px;}
#div6{
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:126px;}*/

#div7{
border: 1px solid #000;
margin-right:auto;
margin-left:auto;
background-color: #EF1787;
height:500px;
width:778px;}
#div8{
border: 1px solid #000;
float: right;
margin-right:auto;
margin-left:auto;
background-color: #EF1787;
height:500px;
width:198px;}
#footer{
margin-right:auto;
margin-left:auto;
background-color: #171717;
height:30px;
width:780px;}

.p1 {
margin:0px;
color: #000000;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
.p2{
margin:0px;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
.p3 {
margin:0px;
color: #000000;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
.p4 {
margin:0px;
color: #000000;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
.p5{
margin:0px;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
.p6 {
margin:0px;
color: #000000;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
#container{
width:100%;
padding:0px;}
.p7 {
margin:0px;
color: #000000;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
.p8 {
margin:0px;
color: #000000;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
.footer {
margin:0px;
color: #000000;
font-family: verdana;
font-size: 12px;
padding:5px 5px 5px 5px;}
</style>[/CPP]

 

[cc30]

Margin auto voor elke div gaat echt niet werken. Je kunt hier het beste een position, left en top meegeven aan de divs of 1 div gebruiken en daarin meerdere div classes. Voorbeeld:

<style type="text/css">
#holder{
	margin: 0 auto 0;
	top: 0px;
	width: 900px;
	height: 700px;
	left: 0px;
	}

.div1{
    float:left;
	position: relative;
	top: 5px;
	width: 450px;
	height: 500px;

}
.div2{
    float:right;
	position: relative;
	top: 5px;
	width: 450px;
	height: 500px;

}
<!--plaats hieronder meer div classes-->
</style>


<div id="holder">


            <div class="div1"></div>
            <div class="div2"></div>


</div>

Tutorial:

http://www.sitemasters.be/tutorials/5/1/90/CSS/Div_element