0

I've got 3 divs floating left inside a container div. The container has a width of 100%, the 3 inside divs have a width of 33%. There is no padding/margin on the divs or body, yet still the container div isn't spanning the entire page, forcing the inside divs to overlap. Please help, I can't seem to find an answer here that works for me.

#container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#left,
#middle,
#right {
  float: left;
  width: 33%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
}
<div id="container">
  <div id="left">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div id="middle">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div id="right">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
</div>
Justin
  • 37
  • 9
  • You may want to add html and css snippets for us to have a guide... – versvs Jul 16 '15 at 11:32
  • 1
    Please show your code, otherwise we won't be able to help. As a quick notice is the width of the body `100%`? If you want to span across the page width you could try setting the width of the items to `33vw`. – Nebula Jul 16 '15 at 11:33
  • Please post your code, so we can check it. – Dania Jul 16 '15 at 11:35
  • I just tried it and it works fine for me – musefan Jul 16 '15 at 11:36
  • Sorry, new here, code should be up now – Justin Jul 16 '15 at 11:39
  • To get you started: your ID's are invalid. IDs should not start with a number. Correct those and your divs will start floating. You don't need `width: 100%` on a `div` unless it is positioned `absolutely`, `fixed`, or floating `left` or `right`. Divs naturally expand to fill all horizontal space. You don't need `margin` or `margin: auto` on your container. Its not centred and by default it has no margin anyway. – Chris Spittles Jul 16 '15 at 11:49
  • I've just used numbers for a quick example. I've followed the rest of your advice and it still isn't working for me. – Justin Jul 16 '15 at 11:56
  • Justin, did you try setting the position of container div to relative or absolute? In addition to this, width:100% for the container style, try to add the position property as relative or absolute, and let me know if it works or not. – Dania Jul 16 '15 at 12:20
  • Hi Dania, position absolute fixed it. The container now spans the entire page. There is still a white space on the right side though since each inside div has a width of 33%, leaving 1% white space. Would you happen to know of a resolution to this or do you think I should post that as a separate question? – Justin Jul 16 '15 at 12:30
  • Good, I will post that as an answer, regarding the percentage, what about trying something like 33.333%? I found good answers to the percentage problem, I will post them in the answer too. Good Luck. – Dania Jul 16 '15 at 12:57

3 Answers3

1

This works. Make sure the body has a width of 100%.

CSS

html, body {
  100%;
}

.container {
  width: 100%;
}

.item {
  width: 33%;
  float: left;
}

HTML

<body>
  <div class="container">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>
</body>
Per Östlund
  • 1,224
  • 1
  • 8
  • 7
0

The ID attribute must begin with a letter. For the class attribute how ever, there is no such limitation. You could try this:

#container {
    width: 100%;
    padding:0;
    background: green;
}

.box {
    width: 33%;
    float:left; 
    background: red;
    
}



body {
    margin: 0;
    padding: 0;
    width: 100%;
}
<div id="container">
  <div class="box">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div class="box">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
  <div class="box">
    <img src="http://placehold.it/100x350" height="350" alt="" />
  </div>
</div>
Emil
  • 1,786
  • 1
  • 17
  • 22
  • Tried this and it's still not working for me. When I run it and inspect the element the container width is 1903px and the page width is 1920px. Still getting white space on the right side of the container. – Justin Jul 16 '15 at 12:03
0

Justin, In addition to setting the width of the container to 100%, try to set the position to absolute or relative, like this,

#container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: absolute; /*or relative, whatever solves it*/
}

As you said dividing the body into three equal divs each of width 33% would leave some white space. You may try something like, width=33.3333%

Also, the answers in this questions are really helpful, css divide width 100% to 3 column

Good Luck.

Community
  • 1
  • 1
Dania
  • 1,648
  • 4
  • 31
  • 57