Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS Position Question

Options
  • 22-11-2013 11:50am
    #1
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭


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


Comments

  • Options
    #2
    Graham
    Moderators, Society & Culture Moderators Posts: 17,642 Mod ✭✭✭✭Graham


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

    281503.png


  • Options
    #3
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭SimonTemplar


    Here is what I see - IE9 Windows.

    Why isn't the div floating in the other browsers :confused:


  • Options
    #4
    Graham
    Moderators, Society & Culture Moderators Posts: 17,642 Mod ✭✭✭✭Graham


    Have you tried in any other browsers?


  • Options
    #5
    Graham
    Moderators, Society & Culture Moderators Posts: 17,642 Mod ✭✭✭✭Graham


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

    Try setting margin to 0.


  • Options
    #6
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭SimonTemplar


    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.


  • Advertisement
  • Options
    #7
    yoyo
    Moderators, Technology & Internet Moderators Posts: 11,005 Mod ✭✭✭✭yoyo


    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

    My Beer Glass collection site 🍺

    My Irish Callcards site



  • Options
    #8
    Bald? er, dash!
    Registered Users Posts: 139 ✭✭Bald? er, dash!


    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.


  • Options
    #9
    Talisman
    Registered Users Posts: 6,001 ✭✭✭Talisman


    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


Advertisement