CSS Position Question

SimonTemplar · 22-11-2013 10:50am #1

I'm trying to get to grips with CSS positioning.
Simple question - why is there a small gap between the two divs because the margins are set to 0

I can get rid of the gap by putting float:left; in the right div but I don't understand what is causing the gap in the first place because there are no margins. Probably something obvious

<html>
<head>
<style type="text/css">
 .left{
 
  width:100px;
  background-color:gray;
  float:left;
  margin:0px;
 
 }
 .right{
 
  width:100px;
  background-color:gray;
  margin:0px;
 } 
 
 body {
  margin:0px;
 }
 
 #wrapper {
  
  margin-left:auto;
  margin-right:auto;
  width:960px;
  
 
 }
</style>
</head>
<body>
 <div id="wrapper">
 
  <div class="left">
   Left <br />Left <br />Left <br />Left <br />Left <br />Left <br />Left <br />
  </div> 
  <div class="right">
   right <br />right <br />right <br />right <br />right <br />right <br />right <br />right <br />right <br />
  </div>
 
 </div>
</body>
</html>

Graham · 22-11-2013 11:36am

Here's what I'm seeing using Safari, Firefox and Chrome on a mac:

SimonTemplar · 22-11-2013 11:45am

Here is what I see - IE9 Windows.

Why isn't the div floating in the other browsers

Graham · 22-11-2013 11:49am

Have you tried in any other browsers?

Graham · 22-11-2013 11:53am

When I float both divs left, there is no gap either.

Try setting margin to 0.

SimonTemplar · 22-11-2013 11:53am

I just tried it with Firefox and I get the same result as you did. I added float:left to the right div and it worked correctly.
I'm still wondering why did this not work correctly without the float:left in the right div?

The margin is 0 already.

yoyo · 22-11-2013 12:23pm

Try setting a doctype like <!doctype html> from memory. Just using <html> can cause browsers to "guess" the standards to render the page using which can lead to unexpected results

Nick

Bald? er, dash! · 22-11-2013 10:08pm

Always, always, always test across the major browsers and prefer anything over IE as your main development browser IMHO! The differences in difference browsers interpretation and rendering will drive you nuts, but equally will develop your understanding of CSS!!! You should read this (it includes a section on floats which will help you).

TL;DR In short, what you will need to do is float everything that should appear side-by-side; these floated elements are out of the normal flow of the page. It is important to realise that the natural behaviour of block-level elements (e.g. divs and others) is to align to the left edge of it's container and underneath preceding elements, and the effect of floating is to change this behaviour, but both divs must be floated.

At some point, I suspect you will wonder why your wrapper div has disappeared (give it a background colour and see for yourself!). This demonstrates that the floated elements are outside the normal flow of the page, because your left and right divs have height (clearly), and are inside the wrapper, but the wrapper has no height!!! There are several approaches to solving this issue, but it is beyond the scope of your original question!

Edit: use Inspect Element in the context menu - or use F12 function key - and you can make css changes and see their affects immediately, and well as interrogate your page elements with Inspector.

Talisman · 24-11-2013 10:58am

yoyo wrote: »

Try setting a doctype like <!doctype html> from memory. Just using <html> can cause browsers to "guess" the standards to render the page using which can lead to unexpected results

Nick

The reason to set the DOCTYPE for the HTML page is to tell Internet Explorer to play nice with the CSS Box Model.

In a well behaved browser a HTML element's width is determined by the following sum:
left margin + left border + left padding + width + right padding + right border + right margin

Without the <!DOCTYPE html> tag Internet Explorer might be inclined to use the buggy quirks mode which uses the original Microsoft interpretation of the CSS Box Model. This includes the border and padding in the width and would use the following sum for the computed content width instead:
left margin + width + right margin

CSS Position Question

Comments