PDA

View Full Version : wanting two floating divs (left/right) of equal width in % not pixels



needsomehelp
Mar 20th, 2010, 05:50 PM
I have two divs (main_left/main_right) which at the moment i am having to set as both 260px in width but wish to have these divs of equal widths (50% each)

when i remove the login box which is to the left of these divs the divs stay the same size of course but wish for them to be bigger and fill the rest of the pages width, so both are 50% each

currently i have this..



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#mainhomepage-container { padding: 0; margin: 0; width: 700px; }
#left { float: left; }
#right { float: right; }
left { text-align: left; }
.clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; }
#main_left { float: left; margin: 10px; width: 260px; border: 1px solid #555555; }
#main_right { float: right; margin: 10px; width: 260px; border: 1px solid #555555; }
</style>
</head>
<body>
<div id="mainhomepage-container">
<div id="loginbox">
<form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div>
<div class="center">Password<br><input name="password" type="password" size="20"></div>
<div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div>
<div class="center"><a href="?">forgot password</a></div>
</form>
</div>
<div>
<div id="left">
<div id="main_left">left main content left main content left main content left main content left main content</div>
<div id="main_right">right main content right main content right main content right main content right main content</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

met
Mar 20th, 2010, 06:21 PM
replace 260x with 50% although if you have margins or borders this will create overflow, i'd remove the margin and set to 49% width each

that will create two boxes of 49% width each with a border inside a 700px container. set the width of #mainhomepage-container to 100% if you want the divs to fill the entire page.

edit left is currently doing nothing, either add a "." or "#" or remove it and the div.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#mainhomepage-container { padding: 0; margin: 0; width: 100%; }
#left { float: left; }
#right { float: right; }

.clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; }
#main_left { float: left; margin: 0px; width: 49%; border: 1px solid #555555; }
#main_right { float: right; margin: 0px; width: 49%;border: 1px solid #555555; }

</style>
</head>
<body>
<div id="mainhomepage-container">
<div id="loginbox">
<form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div>
<div class="center">Password<br><input name="password" type="password" size="20"></div>
<div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div>
<div class="center"><a href="">forgot password</a></div>
</form>
</div>
<div id="main_left">left main content left main content left main content left main content left main content</div>
<div id="main_right">right main content right main content right main content right main content right main content</div>
<div class="clear"></div>
</div>
</body>
</html>

Excavator
Mar 20th, 2010, 06:32 PM
Hello needsomehelp,
As met has already pointed out, mixing px and % dimensions doesn't always work very well.
Some browsers don't do 50% very well either. Instead of sizing both #main-left and #main_right it might work better to size the left and let the right take up all the remaining space.
Along with left not doing much in your CSS you have #left floated left. It seems like #left is a full width div and should not be floated.

Give this a try -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {background: #fc6;}
#mainhomepage-container {
width: 700px;
margin: 0 auto;
padding: 0;
overflow: auto;
background: #ccc;
}
#left {background: #0f0;}
#main_left {
width: 50%;
float: left;
background: #999;
}
#main_right {margin: 0 0 0 50%;}
</style>
</head>
<body>
<div id="mainhomepage-container">
<div id="loginbox">
<form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div>
<div class="center">Password<br><input name="password" type="password" size="20"></div>
<div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div>
<div class="center"><a href="">forgot password</a></div>
</form>
</div>
<div>
<div id="left">
<div id="main_left">left main content left main content left main content left main content left main content</div>
<div id="main_right">right main content right main content right main content right main content right main content</div>
</div>
</div>
</div>
</body>
</html>

needsomehelp
Mar 20th, 2010, 07:17 PM
thank you for your input on this Met,

i have made the changes you suggested but still i have the two boxes show to big and overflow to the next line

here is what i have now...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body { margin: 0; padding: 0; width: 700px; }
#loginbox-text { color: #FF6600; }
#loginbox { float: left; width: 120px; margin: 18px 8px 8px 5px; }

#mainhomepage-container { width: 100%; }
#maincontent { width: 100%; border: 1px dashed #555555; }
#left { float: left; }
#right { float: right; }
.clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; }
#main_left { float: left; width: 49%; border: 2px solid #555555; }
#main_right { float: right; width: 49%; border: 2px solid #555555; }
</style>
</head>
<body>
<div id="maincontent">
<div id="loginbox">
<form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div>
<div class="center">Password<br><input name="password" type="password" size="20"></div>
<div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div>
<div class="center"><a href="?">forgot password</a></div>
</form>
</div>
<div id="main_left">left main content left main content left main content left main content left main content</div>
<div id="main_right">right main content right main content right main content right main content right main content</div>
<div class="clear"></div>
</div>
</body>
</html>

needsomehelp
Mar 20th, 2010, 07:37 PM
thank you Excavator, i have tried your code but this did not have all the divs on the save line.

login left right

but this shows it as

login
left right

can this be set so it all shows on the same line?

edit: sory... once they login the login box is removed and the page shows both divs at 50% on the same line.

Excavator
Mar 20th, 2010, 08:06 PM
That's no problem once you give #loginbox a width and float it.
Look at this -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {background: #fc6;}
#mainhomepage-container {
width: 700px;
margin: 0 auto;
padding: 0;
overflow: auto;
border: 1px solid #555555;
background: #ccc;
}
#loginbox {
width: 148px;
float: left;
}
#left {
margin: 0 0 0 160px;
border: 1px solid #555555;
border-right: 0;
}
#main_left {
width: 50%;
float: left;
background: #999;
}
#main_right {
border-left: 1px solid #555555;
margin: 0 0 0 50%;
}
</style>
</head>
<body>
<div id="mainhomepage-container">
<div id="loginbox">
<form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div>
<div class="center">Password<br><input name="password" type="password" size="20"></div>
<div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div>
<div class="center"><a href="">forgot password</a></div>
</form>
</div>
<div id="left">
<div id="main_left">left main content left main content left main content left main content left main content</div>
<div id="main_right">right main content right main content right main content right main content right main content</div>
</div>
</div>
</body>
</html>

Excavator
Mar 20th, 2010, 08:23 PM
edit: sory... once they login the login box is removed and the page shows both divs at 50% on the same line.

Oops, just noticed this requirement.
That changes things a little. In the code I posted below #loginbox was floated and #left was margined over to make room for it.
That doesn't really work when you remove #loginbox because the margin is still on #left.
Just floating #left doesn't work because floats need a width... not to mention it's not a float once #loginbox is removed but a full width div instead.

Would it work to put your #loginbox in the left column?
Try it like this now -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {background: #fc6;}
#mainhomepage-container {
width: 700px;
margin: 0 auto;
padding: 0;
overflow: auto;
border: 1px solid #555555;
background: #ccc;
}
#left {
border: 1px solid #555555;
border-right: 0;
}
#loginbox {
width: 148px;
margin: 0 10px 0 0;
float: left;
}
#main_left {
width: 50%;
float: left;
background: #999;
}
#main_right {
border-left: 1px solid #555555;
margin: 0 0 0 50%;
}
</style>
</head>
<body>
<div id="mainhomepage-container">
<div id="left">
<div id="main_left">
<div id="loginbox">
<form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div>
<div class="center">Password<br><input name="password" type="password" size="20"></div>
<div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div>
<div class="center"><a href="">forgot password</a></div>
</form>
<!--end loginbox--></div>
left main content left main content left main content left main content left main content
<!--end main_left--></div>
<div id="main_right">
right main content right main content right main content right main content right main content
<!--end main_right--></div>
<!--end mainhomepage-container--></div>
</div>
</body>
</html>

needsomehelp
Mar 21st, 2010, 01:41 PM
thank you.

is it possible to have the two divs the same width size with and without the login box?

needsomehelp
Mar 21st, 2010, 10:07 PM
just to show exactly what i have been trying to do
i have just created this using tables!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" border="1">
<tr>

<?
$logged_in = "yes";
if($logged_in != "yes") { ?>
<td width="150">
<!-- the login box -->
login box
</td>
<? } ?>

<td>

<table width="100%" border="1">
<tr>
<td width="50%">left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box</td>
<td width="50%">right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box</td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>


but wish to have this using CSS instead.

met
Mar 21st, 2010, 10:44 PM
<div style="width:50%; height:200px;float:left;">
height for demo purposes only..
</div>
<div style="margin-left:50%;height:200px;">
height for demo purposes only..
</div>


really though what are you trying to do..we've told you how to create two columns that expand to 50% and provided various examples

needsomehelp
Mar 21st, 2010, 11:10 PM
in my last post i gave a tables version of what i was trying to do.

when the user is not logged in they see three divs, login, left and right
when they login they only see the left and right divs.

i have added an IF statement in my tables code to show what i was after.

but on both conditions i need the two divs on the right to both be 50%, login box in view or not.

i have spent all day again on this and still not able to figure this out. so decided to show a tables version to see if this would help people understand what i was after.




edit:
I have three divs and wish for them all to show on the same line as so

box1 box2 box3

box1 needs to be 150px in width

box2 and box3 both need to be 50% each of what ever is left over on the right side of the line that the divs show on.


i only show box1 when the user is not logged in, it is the login box!

so this means that box2 and box3 still need to be both 50% but this time for all of the line that they both show on.


i have attached two images that show what i am looking to do.
(i have used tables to get these views)
:

met
Mar 21st, 2010, 11:29 PM
ugh

here


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body, td, th {
font-family: Arial Black, Gadget, sans-serif;
}
#container {
background:yellow;
}
#left {
width:50%;
float:left;
background:red;
overflow:auto;
}
#login {
width:150px;
float:left;
background:green;
}
#right {
margin-left:50%;
background: blue;
}
#footer {
width:100%;
height:40px;
background:black;
color:#fff;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="left">
<?php $logged_in=false; /*change to true to see the effect */
if(!$logged_in) {
?>
<div id="login">
<p>Login Box </p>
<p>Login Box</p>
<p>Login Box</p>
</div>
<?php } ?>
<p>Left content left content </p>
<p>Left content left content </p>
<p>Left content left content </p>
<p>Left content left content </p>
</div>
<div id="right">
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

needsomehelp
Mar 21st, 2010, 11:37 PM
yep sort of, but wanting both box2 and box3 to be the same width

with or without the login box showing they both should be 50%

met
Mar 21st, 2010, 11:43 PM
<?php $logged_in=false; /*change to true to see the effect */?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body, td, th {
font-family: Arial Black, Gadget, sans-serif;
}
#container {
background:yellow;
<?php if(!$logged_in) { ?>padding-left:150px; <?php } ?>
}
#left {
width:50%;
float:left;
background:red;
overflow:auto;
}
#login {
width:150px;
float:left;
background:green;
}
#right {
margin-left:50%;
background: blue;
}
#footer {
width:100%;
height:40px;
background:black;
color:#fff;
}
-->
</style>
</head>
<body>
<?php if(!$logged_in) { ?>
<div id="login">
<p>Login Box </p>
<p>Login Box</p>
<p>Login Box</p>
</div>
<?php } ?>

<div id="container">

<div id="left">
<p>Left content left content </p>
<p>Left content left content </p>
<p>Left content left content </p>
<p>Left content left content </p>
</div>
<div id="right">
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>

needsomehelp
Mar 22nd, 2010, 12:31 AM
Wow thank you so much for your help with this. It has been driving me crazy all week. I did not know you could add PHP to the styles!




<?php $logged_in=false; /*change to true to see the effect */?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body, td, th {
font-family: Arial Black, Gadget, sans-serif;
}
#container {
background:yellow;
<?php if(!$logged_in) { ?>padding-left:150px; <?php } ?>
}
#left {
width:50%;
float:left;
background:red;
overflow:auto;
}
#login {
width:150px;
float:left;
background:green;
}
#right {
margin-left:50%;
background: blue;
}
#footer {
width:100%;
height:40px;
background:black;
color:#fff;
}
-->
</style>
</head>
<body>
<?php if(!$logged_in) { ?>
<div id="login">
<p>Login Box </p>
<p>Login Box</p>
<p>Login Box</p>
</div>
<?php } ?>

<div id="container">

<div id="left">
<p>Left content left content </p>
<p>Left content left content </p>
<p>Left content left content </p>
<p>Left content left content </p>
</div>
<div id="right">
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
<p>Right content right content </p>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>