homepage Welcome to WebmasterWorld Guest from 54.243.13.30
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
HELP! How can I get 2 divs EXCATLY beside each other?
tufduck




msg:1221320
 8:37 am on Jan 29, 2004 (gmt 0)

I have a problem that's driving me nuts. It's simple, I want 2 DIV's beside each other, left and right. I use float: left on the left box. Here's the problem: I get a few pixels of white space between the boxes! They aren't excatly side by side. Why is it so? I have all margin and padding to 0. Is it a browser thing? I'm using IE 5.5 and 6.0.

Here is my code: (copy/paste it to a htm-file and view it in a browser to see my problem)

<DIV style="POSITION: RELATIVE;
MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px;
PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px;
HEIGHT: 150px;
WIDTH: 100px;
BACKGROUND-COLOR: red;
FLOAT: left;">
Left_box
</DIV>

<DIV style="POSITION: RELATIVE;
MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px;
PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px;
HEIGHT: 150px;
WIDTH: 150px;
BACKGROUND-COLOR: blue;">
Right_box. How can I get rid of the white space between these boxes?
</DIV>

Shouldn't these boxes be excatly side by side, without any white space between? I have tried everything, and saw that if I remove the HEIGHT and WIDTH from the rigth box, the white space disappeared... Why? I don't understand that. But anyway, I need to have height and width specified, so I can't remove them.

Someone help me please! I have switched to tables because of this issue, and got rid of the white space. But I don't want to use tables, my page takes a long time to load with them.

Thanks in advance,
Andreas

 

BlobFisk




msg:1221321
 10:40 am on Jan 29, 2004 (gmt 0)

Welcome to WebmasterWorld, tufduck!

Try using just float:left; on your left layer, and leaving out the position:relative; on it.

Also, if all your margins are going to be zero, you can simply use margin:0; - no need for units (as it's zero), or to specify the top, right, bottom or left. The exact same applies to padding.

Also, are you using a Documnent Type Definition (DTD) [w3.org] on your page?

One last thing, it may be more beneficial to move all the stle information out of the tags, and into either an external stylesheet or an inline set of style rules specified in the document <head>.

HTH

SuzyUK




msg:1221322
 1:15 pm on Jan 29, 2004 (gmt 0)

Hi tufduck - Welcome to WebmasterWorld

Are you viewing this in IE? and if so are you aware (apart from the 3px gap between the divs) that this CSS is not doing what you think it is in all other browsers?

In all other browsers the blue (right) div is appearing flush with the left hand side of the page. Which is the correct behaviour.

Both problems are due to IEs buggy implementation of Float :(

take this CSS and HTML:
.left {
margin: 0;
padding: 0;;
height: 150px;
width: 100px;
background: red;
float: left;
}

.right {
margin: 0;
padding: 0;
height: 180px;
width: 180px;
background: blue;
}

<div class="left">Left_box</div>

<div class="right">Right_box. How can I get rid of the white space between these boxes?</div>

which is the simplified version of yours above and I've amended the width and height of right box. If you apply that you will the boxes side by side (yes still with the gap) in IE now look at it another browser.

What you will see is both boxes aligned to the left hand side of the page with the red(left) box floating over the top of the blue (right) box with the text-only (inline box) in the blue box being displaced by the float. This is the correct behaviour!

So to get your two boxes side by side you should add
a left margin to the right box the same width as the left box:
margin: 0 0 0 100px;

Now that gets it working in all other browsers..

The fix for the 3px gap between the divs is required for IE/Windows only so it has to be in the form of a "hack" or conditional - I'll do the hack - the fix is to give the left box a negative right margin of -3px but that on its own will not fix this instance because of that left margin we just applied for the other browsers!

IE although not seeming to be affected by this actually is! but it didn't need that left margin anyway so we need to set it back to zero again and we can put the two fixes into the same hack.

add this rule to your CSS:

/* hide from mac \*/
* html .left {margin-right: -3px;}
* html .right {margin-left: 0;}
/* end hide */

The first and last lines is the bit that hides it from IE/mac because the * html rules apply to all versions of IE and we only want windows to see it!

Such a lot for a small gap eh ;)

Full CSS:
.left {
margin: 0;
padding: 0;;
height: 150px;
width: 100px;
background: red;
float: left;
}

.right {
margin: 0 0 0 100px;
padding: 0;
height: 180px;
width: 180px;
background: blue;
}

/* hide from mac \*/
* html .left {margin-right: -3px;}
* html .right {margin-left: 0;}
/* end hide */

Suzy

tufduck




msg:1221323
 8:19 am on Jan 30, 2004 (gmt 0)

Thanks for the help!
I will try all of your suggestions!

/ Andreas

Global Options:
 top home search open messages active posts  
 

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved