How to get 2 blocks floating 50% each

Forum Moderators: not2easy

Message Too Old, No Replies

How to get 2 blocks floating 50% each

Fotiman

10:22 pm on Mar 31, 2006 (gmt 0)

Here's what I want:


+-- Container ------------------+ 
¦+-- float1 ---+ +-- float2 ---+¦ 
¦¦ width = 50% ¦ ¦ width = 50% ¦¦ 
¦+-------------+ +-------------+¦ 
+-------------------------------+

Container contains a bunch of stuff before and after the floats, and I can't float Container. Container also has some padding. float1 and float2 are both fieldsets.

The problem I have is that because container has padding, if I set the widths on the float to be 50%, then they will be too large because the width doesn't account for the padding. Any ideas how I might do this?

The table-layout approach would be a table with a width of 100%, 1 row, 2 columns, each column with a width of 50%.

Thanks.

kk5st

7:49 am on Apr 1, 2006 (gmt 0)

First, use a proper DTD to force IE into standards mode. The correct box model will then be used. Second, allow a little leeway as IE adds a phantom 3px margin to floats in certain conditions. Without seeing the source, I can only guess at your situation.

cheers,

gary

Fotiman

3:16 pm on Apr 3, 2006 (gmt 0)

Yes, I am using the full DOCTYPE to keep IE from going into quirks mode. The problem, though, is that what I really want is for the TOTAL width (including margins, borders, padding, and width) to be 50%. If I specify a width of 50%, but then add 5px of padding, then the boxes become too big to fit next to each other. Here's an example:


<!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:utf-8"> 
  <title>Test</title> 
  <style type="text/css"> 
  body { margin: 0; padding: 0; } 
  #container { border: 1px solid blue; } 
  #boxA { float: left; width: 50%; padding: 5px; background-color: #fee; border: 2px solid black; } 
  #boxB { float: left; width: 50%; padding: 5px; background-color: #efe; border: 2px solid black; } 
  </style> 
</head> 
<body> 
 <div id="container"> 
   <div id="boxA">BLah blah blah</div> 
   <div id="boxB">Blah blah blah</div> 
 </div> 
</body> 
</html>

Don_Hoagie

4:22 pm on Apr 3, 2006 (gmt 0)

Fotiman, I had to do something similar (adding padding and border to a 3-column 22%/56%/22% floated layout), and I just said screw minimalism and created inner divs for each column. The li'l bonus here also being that things should make more sense to IE5 versions this way as well, since it avoids the box model issue.

For each floated div with its dictated 50% width, toss another div inside that one that just has the padding dimensions, and use that as your content div. Div soup? Perhaps yes, as you end up with a <div> that is purely for style and not for content... but a div is an empty container, and I say there's nothing wrong with using empty containers to contain things.

Fotiman

4:49 pm on Apr 3, 2006 (gmt 0)

Thanks! That'll work! I don't see anything wrong with excess div's either. A div is a generic container so having a bunch of them, in my opinion, is in no way a bad thing (except, perhaps, to add a small amount of bloat). Thanks!

JAB Creations

5:32 pm on Apr 3, 2006 (gmt 0)

Use negative margins to compesate...

<!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:utf-8">
<title>Test</title>
<style type="text/css">
body { margin: 0; padding: 0; }
#container { border: 1px solid blue;}
#boxA { float: left; width: 50%; padding: 2px; margin-left: -4px; margin-right: -4px; background-color: #fee; border: 1px solid black; }
#boxB { float: left; width: 50%; padding: 2px; margin-left: -4px; margin-right: -4px; background-color: #efe; border: 1px solid black; }
br.clear {clear: both;}
</style>
</head>
<body>
<div id="container">
<div id="boxA">BLah blah blah</div>
<div id="boxB">Blah blah blah</div>
<br class="clear" />
</div>
</body>
</html>

You can remove #container if you want unless there is additional formating to your layout I'm not aware of?

John

doodlebee

2:16 pm on Apr 4, 2006 (gmt 0)

Another solution - although not very nice - is to set the #cxontainer as "display:table;" and the inner divs as "display:table-cell;"

Sometimes that helps. But like I said, not pretty...