Welcome to WebmasterWorld Guest from 54.204.162.36

Forum Moderators: incrediBILL

Side by side DIVs, with a percentage width and a gap between them

side by side divs with percent size

   
1:24 pm on Sep 6, 2006 (gmt 0)

5+ Year Member



Hi
I have a working example of 2 div's side by side, but I would like the div's to have width's of a percentage, lets say 40% and 60%, but I want another div between them of 5px.

In IE I can do 100%-5px for example, but that doesn't work with other browsers and non 100% values.

Anyone have any ideas? Im ideally looking for a solution that will work in IE, Firefox, Opera and Safari, but seperate solutions are also an option. I know, Im not asking much! ;-)

Thanks
Nasdaq

10:05 pm on Sep 6, 2006 (gmt 0)

5+ Year Member



Well, I have managed to get something working for IE, but not in Opera or Firefox;

<html><head>
</head>
<body style="margin:0;">
<div style="position:relative;height:100%;width:35%;background-color:teal;float:left;padding:0;">Box 1</div>
<div style="width:4px;height:100%;background-color:silver;float:left;"></div>
<div style="position:relative;height:100%;float:left;">
<div style="height:100%;width:100%;position:relative;background-color:teal;">Box 2</div>
</div>
</body>
</html>

It would be great if someone knows how to get this to work with non IE browsers?

Many thanks!
Nasdaq

4:24 pm on Sep 15, 2006 (gmt 0)

10+ Year Member



I came on this board to ask the exact same question, but it turns out I just found the solution myself.

To add spacing in non-IE browsers using divs try the following, it works fine:

<div style="margin: 50px 50px 50px 50px;">Text that will have margins</div>

6:16 pm on Sep 15, 2006 (gmt 0)

5+ Year Member



<html><head>
</head>
<body style="margin:0;">
<div style="height:100%;width:35%;background-color:teal;float:left;padding:0;">Box 1</div>
<div style="height:100%;float:left;">3</div>
<div style="height:100%;width:60%;float:left;background-color:teal;">Box 2</div>

</body>
</html>

But make sure you are using a proper doctype, so the modified code would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<html><head>
<style type="text/css">
html,body{height:100%}
</style>
</head>
<body style="margin:0">
<div style="height:100%;width:35%;background-color:teal;float:left;padding:0;">Box 1</div>
<div style="height:100%;float:left;">3</div>
<div style="height:100%;width:60%;float:left;background-color:teal;">Box 2</div>

</body>
</html>

9:55 pm on Sep 15, 2006 (gmt 0)

5+ Year Member



Why do you want a box that's only 5px wide?

At that width, it certainly can't be to put content in. If you only want it for some sort of border effect or something like that then there are much better ways to do it:

<div style="width:40%;background:teal;float:left;">Box one</div>
<div style="width:60%;background:teal;float:left;">
<div style="border-left:silver 5px solid;">Box two</dix>
</div>
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month