PDA

View Full Version : CSS <div> positioning...



chump2877
02-23-2005, 01:04 AM
I'm trying to migrate from using tables to CSS for positioning page elements...

I think my question is probably simply answered...I want to take three different <div>'s and position them side-by-side on a page...I've tried different things, but haven't had any luck....How is this done, in general?

Thanks.

liorean
02-23-2005, 01:05 AM
Two ways: absolute positioning, or floats. Alternatively, you can use a combination of floats and static(default) or relative positioning. If you tell us a little more about the specs for this, we can probably tell you what would be best for you.

chump2877
02-23-2005, 01:28 AM
"float" seems like it might do the trick, but I'm still having difficulties...could you maybe steer me down the right path with this code:


<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>


<div style="position:relative;left:10%">

<p>BLAH</p>

</div>


<div style="float:right;margin:4px">

<p>BLAH</p>

</div>


<div style="float:right;margin:4px">

<p>BLAH</p>

</div>



</BODY>
</HTML>

I don;t think I want to use absolute positioning casue that will screw up my page layout when I resize the browser....I think..

Thanks.

_Aerospace_Eng_
02-23-2005, 01:33 AM
you may find something of use here http://css-discuss.incutio.com/?page=ThreeColumnLayouts or you can mess around with something i wrote up really quickly

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple 3 Column Layout</title>
<style type="text/css">
html, body {
height:97%;
margin:5px;
}
#container {
width:100%;
height:100%;
}
#left {
float:left;
width:15%;
height:100%;
margin:2px;
border:1px solid #000000;
}
#right {
float:right;
width:15%;
height:100%;
margin:2px;
border:1px solid #000000;
}
#mid {
width:67%;
height:100%;
margin-left:auto;
margin-right:auto;
border:1px solid #000000;
margin-top:2px;
}
</style>
</head>

<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</div>
</body>
</html>

chump2877
02-23-2005, 01:42 AM
Awesome, that helps...I can tinker with your code to make it work for me...

Thank... :)

chump2877
02-23-2005, 02:48 AM
Hey, I applied your code to my 3 <div>'s, but I'm still having a problem with the <div> on the right....it's not vertically aligning with the other two <div>'s....you can see it here: http://www.mediamogulsweb.com/ad_banner.php.

Help, please? :D

thanks.

shlagish
02-23-2005, 04:11 AM
Just a quick suggestion:
Try making your #container wider I think it's not wide enough to allow your divs to be side by side. Maybe you forgot to count in the borders in your calculations?

chump2877
02-23-2005, 04:52 AM
that makes sense...so I tried it, and it doesn't seem to help.....

Just curious, could all the <br> tags in my middle <div> section be doing this?...dunno, I'm at a loss....

Helllppp....

rmedek
02-23-2005, 11:14 AM
Did you change your page recently?

I tried to take a look for you, and although you have ids defined in your CSS, I didn't see any in your HTML (no #right div, #left div, etc)...

chump2877
02-23-2005, 11:52 AM
Yes, I did change the page, and the styles should be deleted as I'm no longer using them....and this thread should probably be closed...

sorry.