Reputation: 45

How to equally distribute floated divs?

I have 5 left floated divs, and I'd like the divs to be equally distributed along the width of the screen. The margin is set to 20px, and it works almost perfectly - other than there's a tiny bit more space on the right of the divs than the left. It's hard to describe, so I made a picture.

http://gyazo.com/5056281587f88224cc4c70d39b472735

As you can see, I made the 'divs' offset to the left just a tad - I need them to be centered, but will still adapt to three per row if there's space. If you've got any more questions about what I'm asking, check out m.harvard.edu and test it on the desktop - resize the window and you'll see that the icons remain equally distributed until enough space for another icon is created.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Diadem Sports</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<link href="css/core.css" rel="stylesheet" type="text/css" />
<link href="css/core-small.css" media="(max-width:600px)" rel="stylesheet" type="text/css" />
<link href="css/core-large.css" media="(min-width:601px)" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
</head>

<body>
    <div class="header">
    <div class="titlebar">
        <div class="logo"></div>
    </div>
    <div class="navbar-container">
        <div class="navbar">
        <div class="navbutton">72</div>
        <div class="navbutton">73</div>
        <div class="navbutton">74</div>
        <div class="navbutton">75</div>
        <div class="navbutton">76</div>
        <span class="strech"></span>
        </div>
    </div>
    </div>
</body>
</html>

core.css

@charset "utf-8";
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li {
    margin: 0;
    padding: 0;
}

.titlebar {
    width: 100%;
    height: 60px;
    border-bottom: #5CB4C0 2px solid;
}

.logo {
    background: url(../img/diadem.png) no-repeat center center;
}

.navbutton {
    cursor: pointer;
    display: inline-block;
    float: left;
    width: 15%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-bottom: #5CB4C0 2px solid;
    /*color: #5CB4C0;*/
    font-family: "Montserrat", "Arial Black", Gadget, sans-serif;
}

.navbutton:hover {
    background-color: #008C99;
    border-bottom: #008C99 2px solid;
    color: #FFFFFF;
}

core-small.css

@charset "utf-8";
.header {
    width: 100%;
    height: 100%;
}

.navbar {
    width: 80%;
    margin: 0 auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

}

.navbutton {
    float: left;
    width: 60px;
    height: 60px;
    border: #5CB4C0 2px solid;
    border-radius: 10px;
    margin: 20px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
}

.strech {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

EDIT: I should explain this more in-depth I guess, so here's my attempt - once again, ask questions if you don't understand, as I find this hard to explain. I'm designing a responsive website, using CSS media queries. I'm designing from small to big - I'm currently working on the mobile version of the site. I have a set of about 10 thumbnails for the site. As many of you would know, when objects are floated, they fill the row until no more can fit on the row, and the next are displaced onto the next row. As the sizes of phone screens vary, different amounts of static images can fit on a row. Take an iPhone for example, as the screen width is 320px when in portrait orientation. Mine can fit 2 images with a 25px margin in the 320px. But when the screen is rotated to landscape, 5 can fit per row. The issue I'm faced with is that the objects are displaced correctly - it fits as many as it can per row, but the images aren't being distributed correctly. What I need is a way for the device to figure on the screen width, place as many objects as it can per row, including the margin. Then the device needs to equally distribute the objects across the screen.

Upvotes: 0

Answers (3)

Radu Andrei

Reputation: 1073

This may or may not help you. Distributing the floated divs can't be done with css alone. Floating is funky like that. There are 2 css approaches depending on what's in those divs and what you need - find them in the fiddle weird posting error - don't mind this. Oh yeah, the flexbox idea is good. Check caniuse for browser support.

Upvotes: 1