CODEWITHSUNDEEP
jqueryhtmlcss
Karl Newark
Karl Newark

Reputation: 45

Make divs align correctly

I am having trouble getting divs to align correctly (I want the divs to line up so that 4 50px divs fit in a 200px container perfectly), there is always whitespace, despite the elements having no padding or margin.

I have tried this inside and outside of JSFiddle and on chrome and firefox.

http://jsfiddle.net/JF6xS/39/

HTML:

<div id="prev">PREV</div>
    <div id="next">NEXT</div>

    <div id="slides">
        <div class="offset-parent">
            <div class="images">1</div>
            <div class="images">2</div>
            <div class="images">3</div>
            <div class="images">4</div>
            <div class="images">5</div>
            <div class="images">6</div>
            <div class="images">7</div>
            <div class="images">8</div>
            <div class="images">9</div>
            <div class="images">10</div>
            <div class="images">11</div>
            <div class="images">12</div>
            <div class="images">13</div>
            <div class="images">14</div>
            <div class="images">15</div>
            <div class="images">16</div>
            <div class="images">17</div>
            <div class="images">18</div>
            <div class="images">19</div>
            <div class="images">20</div>

        </div>
    </div>

CSS:

body{
white-space:nowrap;
margin: 0px
}

.images{
position:relative;
height: 100%;
width: 50px;
display: inline-block;
padding: 0px;
box-sizing: border-box;
border:1px solid red;
margin: 0px;
}

#prev{
position:fixed;
top:20px;
left:0px;
cursor: pointer;
}

#next{
position:fixed;
top:0px;
left:0px;
cursor: pointer;
}

.offset-parent {
position: relative;
width: 200px;
}

#slides {
position: relative;
top:50px;
overflow: auto;
height: auto;
width: 200px;
overflow: hidden;
}

Upvotes: 0

Views: 45

Answers (4)

PlantTheIdea
PlantTheIdea

Reputation: 16359

There is always a 4px right-side padding with inline-block elements ... don't ask me why, but it goes back to my grampappy's grampappy. Two ways to eliminate it:

  • Remove whitespace between HTML elements
  • Set font-size of parent to 0, and then explicitly set font-size of sub-elements

I prefer the first method, cuz its very easy to implement and future CSS changes don't break it:

        <div class="images">
            1
        </div><div class="images">
            2
        </div><div class="images">
            3
        </div><div class="images">

Etc, etc. If you want more info, this article is a great resource on the topic.

UPDATE

I updated your jsFiddle to use the font-size:0 trick, mainly because I didn't want to reformat all your HTML, but also because it provides the same result as the fix I provided above.

Upvotes: 1

Jon Surrell
Jon Surrell

Reputation: 9637

The line breaks between the divs will be interpreted as white space, a single space in your HTML result.

I'd suggest setting the divs to float: left. This will remove the white space between them.

Upvotes: 1

Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

It is because .images have display:inline-block; which by default leaves a space. To cover that you have two choices. First either to add negative margin like this

.images{
margin-left:-4px;
}

or you can change display inline-block to block and add float left;.

Upvotes: 0

RichardB
RichardB

Reputation: 2767

The inline-block is making it act in a similar way to an image, rather than a pure block element (as divs are by default), and so the space between the divs is visible.

That space is acting like a space between words.

You could either delete the space between the divs, or make each one block rather than inline-block and float them left.

Upvotes: 0

Related Questions