I’m trying to make a layout with 4 div blocks. The alignments are right center and left, right? How do i put two blocks in the center, but not on top of one another. Like, one can be center left and one can be center right?
Hope that made sense!
I’m trying to make a layout with 4 div blocks. The alignments are right center and left, right? How do i put two blocks in the center, but not on top of one another. Like, one can be center left and one can be center right?
Hope that made sense!
September 12th, 2010 on 8:18 pm
Set a wrapper div the width of both divs are a little larger depending if you have borders/margins/paddings set for the two divs. Set your CSS to float one div left and the other right. See coded example here: http://paynelessdesigns.pastebin.com/W6D17kpz
Or…
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="date" content="2/7/2009">
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
body {
font-size: 1em;
color: #000;
background: #fff;
}
div#wrap {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px inset #000;
}
div#left {
float: left;
width: 400px;
height: 600px;
padding: 5px;
border: 1px inset #f00;
clear: right;
}
div#right {
float: right;
width: 240px;
height: 600px;
padding: 5px;
border: 1px inset #00f;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Your Title Here</h1>
<div id="wrap"><!– START WRAP –>
<div id="left"><p>Left-side content.</p></div>
<div id="right"><p>Right-side content.</p></div>
</div><!– END WRAP –>
</body></html>
Ron
September 12th, 2010 on 8:18 pm
Use the clear property to force the second block down and use float:left or right (or any other positionning method) to align it the way you want
September 12th, 2010 on 8:18 pm
Try using the margin-left and right , play about with this:
<html>
<body>
<div class="div1">
bonjour
<div>
<div class="div2">
hello
<div>
</body>
</html>
<style>
.div1 {position:absolute;left:50%;top:20px;margin-left:25px;background:green;width:20px}
.div2 {position:absolute;left:50%;top:20px;margin-left:-100px;background:blue;width:20px}
</style>