CCS: Probleem rechts uitlijnen

Status
Niet open voor verdere reacties.
5i5

5i5

Gebruiker
Lid geworden
27 jan 2009
Berichten
376
Zoals de titel zegt hebt ik een probleem met het rechts uitlijnen van een div.

De rechter div (east) wordt uitgelijnd onder de hoogte van de middelste div (main). Dit is niet de bedoeling ik wil de rechter div op gelijke hoogte als de twee andere div's hebben.

PS: Ik wil di niet met de margin-top van de rechter div (east) doen omdat ik deze dan aan moet passen voor elke verandering in mijn pagina.

HTML-code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Titel</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="CSS/Style.css" media="screen" />
	<link rel="shortcut icon" href="CSS/IMG/.ico" />
	
</head>

<body>
	<div id="header">
	<h1><br/>Titel</h1>
		<center>
		<div class="nav">
			<ul>
				<li><a href="" class="selected">A	</a></li>
				<li><a href="">B		</a></li>
				<li><a href="">C		</a></li>
				<li><a href="">D		</a></li>
				<li><a href="">E		</a></li>
			</ul>
		</div>
		</center>
		
	</div>
	
	<div id="west">
	<p>a</p>
	</div>
	
	<div id="main">
	<p>bdasdasdsad</p>
	<p>adsaf</p>
	</div>
	
	<div id="east">
	<p>a</p>
	</div>
	
</body>

</html>

CSS-code:
Code: 
body
{
 z-index:		10;
 
 margin:		0px;
 padding:		0px;
 
 background:	#444;
 
 font-family:	Verdana;
 color:			#FFF;
 font-size:		12px;
}

p
{
 font-family:	Verdana;
 color:			#FFF;
}

a, a:visited
{
 font-family:		Verdana;
 color:				#93DEFF;
 text-decoration:	none;
}
a:hover, a.active
{
 font-family:		Verdana;
 color:				#FFF;
 text-decoration:	none;
}

h1
{
 font-size:	24px;
 
 margin: 		0px;
 margin-left:	24px;
 margin-top:	0px;
 padding: 		0px;
}

#header
{
 z-index:		90;

 margin:		0px;
 height: 		123px;
 background:	#333;
 border-bottom: #FFF solid 1px;
}

#west
{
 z-index:		50;
 
 float:			left;
 clear:			left;
 
 margin-top:	12px;
 height:		40%;
 margin-left:	10px;
 width:			120px;
 background:	#FFF;
}

#main
{
 z-index:		80;

 margin-left:	140px;
 margin-right:	140px;
 margin-top:	12px;
 
 background:	#FFF;
}

#east
{
 z-index:		40;
 
 float:			right;
 clear:			right;
 
 margin-top:	12px; /**/
 height:		40%;
 margin-right:	10px;
 width:			120px;
 background:	#FFF;
}

Alvast bedankt.
 
Laatst bewerkt:
Beetje aanpassen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <title>Titel</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" >
body
{
 
 margin:	0px;
 padding:	0px;
 
 background:	#444;
 
 font-family:	Verdana;
 color:	#FFF;
 font-size:	12px;
}

p
{
 font-family:	Verdana;
 color:#FFF;
}

a, a:visited
{
 font-family:	Verdana;
 color:	#93DEFF;
 text-decoration:	none;
}
a:hover, a.active
{
 font-family:		Verdana;
 color:				#FFF;
 text-decoration:	none;
}

h1
{
 font-size:	24px;
 
 margin: 		0px;
 margin-left:	24px;
 margin-top:	0px;
 padding: 		0px;
}

#header
{
 margin:		0px;
 height: 		123px;
 background:	#333;
 border-bottom: #FFF solid 1px;
}

#container
{
width:800px;
border: 2px solid #ff0000;
margin-left:auto;
margin-right:auto;
display:inline-block;
}

#west
{
display:inline-block;
 
 float:	left;

 
 margin-top:	12px;
 height:		40%;
 margin-left:	10px;
 width:			120px;
 background:	#FFF;
display:block;
}

#main
{
width:480px;


margin-top:	12px;
 


 background:	#FFF;
 float:	left;

}

#east
{
 
 
 float: left;
 clear:right;
 
 margin-top:12px; /**/
 height:	40%;
 margin-right:	10px;
 width:120px;
 background:	#FFF;
}

#west, #east, #main
{
display:block;
text-align:left;
border:solid 1px #ff0000;
padding:10px;
}
</style>
    <link rel="shortcut icon" href="CSS/IMG/.ico" />
    
</head>
 
<body>

  <div id="container">

    <div id="header">
    <h1><br/>Titel</h1>
        <center>
        <div class="nav">
            <ul>
                <li><a href="" class="selected">A   </a></li>
                <li><a href="">B        </a></li>
                <li><a href="">C        </a></li>
                <li><a href="">D        </a></li>
                <li><a href="">E        </a></li>
            </ul>
        </div>
        </center>
        
    </div>
<div style="clear:both;"></div>

  
   <div id="west">
    <p>a</p>
    </div>
    
    <div id="main">
    <p>bdasdasdsad</p>
    <p>adsaf</p>
    </div>
    
    <div id="east">
    <p>a</p>
    </div>
    
</div> 
</body>
 
</html>

:cool:
 
Deze vraag heb ik eerde voorbij zien komen en ik heb daar al eerder een plossing voor verzonnen zie hieronder:
HTML: 
<html>
    <head>
        <style>
            * {padding: 5px;}
            body {padding: 10px;}
            #wrapper {border: 1px solid red;}
            #header {height: 100px; background: #ccc;}
            #footer {clear: both; background: blue; color: white}
            #left {float: left; background: #fff; width: 150px; border: 1px solid green;}
            #right {float: right; background: #fff; width: 150px; border: 1px solid green}
            #center {background: #333; margin: 0 180px;}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">header</div>
            <div id="right">right</div>
            <div id="left">left</div>
            <div id="center">center</div>
            <div id="footer">footer</div>
        </div>
    
    </body>
</html>
 
kijk ook na of hij daar onder blijft hangen als je die rechterbox zijn width of margin verkleint.
Heb ik ook al voorgehad. Hinder door margin.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan