homepage Welcome to WebmasterWorld Guest from 54.204.79.235
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Side by side DIVs, with a percentage width and a gap between them
side by side divs with percent size
Nasdaq




msg:3073490
 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




msg:3074105
 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;

<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

Hugene




msg:3084512
 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




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

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

Ingolemo




msg:3084925
 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved