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

Forum Moderators: open

Message Too Old, No Replies

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

side by side divs with percent size

Nasdaq

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

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

Nasdaq

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

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

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

Many thanks!
Nasdaq

Hugene

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

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>

icantthinkofone

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

</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>

Ingolemo

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

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>