...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum