CODEWITHSUNDEEP
htmlcss
Gunr Jesra
Gunr Jesra

Reputation: 110

CSS - How to align divs horizontally?

so i got this list of divs 200 by 200 but they display vertically now i pretty much want my whole site to be horizontal driven like the metro ui

body {
    background-color: blue;
}

div {
    display: inline;
    background-color:black;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 5px;
    border: solid 2px yellow;
}

if i apply display: inline, they all shrink??? why DO: uncomment display: inline; in jsfiddle css and see

http://jsfiddle.net/uVY5V/3/

whats a good way to lay everything horizontal or inline

Upvotes: 2

Views: 2127

Answers (6)

Airen
Airen

Reputation: 2169

You can use the text-align: justify for the div.wrapper, and you can use the display:inline-block for the div list. Like this:

HTML

<div class="wrapper">
  <div id="search_tile" class="search_tile"></div>
    <div id="timeline_tile" class="timeline_tile">  </div>
    <div id="conversations_tile" class="conversations_tile"></div>
    <div id="source_tile" class="source_tile"></div>
    <div id="11_tile" class="demo_11_tile"></div>
    <div id="14_tile" class="demo_14_tile"></div>
    <div id="12_tile" class="demo_12_tile"></div>
    <div id="13_tile" class="demo_13_tile"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

CSS

body{
background-color: blue;
}
.wrapper {
  letter-spacing: -4px;
  word-spacing: -4px;
  font-size: 0;
  text-align: justify;
}
.wrapper:after {
  content:"";
  display:inline-block;
  width: 100%;
}

.wrapper div{  
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
    background-color:black; 
    width: 200px; 
    max-width: 200px;
    height: 200px; 
    margin: 10px; 
    padding: 5px; 
    border: solid 2px yellow;
    -webkit-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -moz-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -ms-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -o-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
}
.wrapper .placeholder {
  width: 200px;
  height: 0;
  border: none;
  background:none;
}

Please view the demo. If you are interested, you can click here and here.

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

Giving white-space: nowrap to the body tag and display: inline-block to the div tag does the trick.

Working Fiddle

Upvotes: 3

cantera
cantera

Reputation: 24985

You can fix this a few different ways:

  1. Change display: inline; to display: inline-block as shown here

  2. Add float: left; as shown here

  3. Leave everything as-is and add some content to your divs as shown here

Upvotes: 0

underscore
underscore

Reputation: 6877

We’ve been using floats for layout pretty much since we left tables behind. It’s a quirky solution that can often cause troubles, but if you know what you’re doing, it works.

One interesting alternative to floats that people are turning to more and more lately is to set the display value of an element to inline-block. 

div{  
        display: inline-block;
        background-color:black; 
        width: 200px; 
        height: 200px; 
        margin: 10px; 
        padding: 5px; 
        border: solid 2px yellow;

    }

Upvotes: 0

Corey Horn
Corey Horn

Reputation: 499

Depends on exactly what you want. This will make them go horizontally until the end of the width. JsFiddle

HTML:

<div id="search_tile" class="search_tile"></div>
<div id="timeline_tile" class="timeline_tile"></div>
<div id="conversations_tile" class="conversations_tile"></div>
<div id="source_tile" class="source_tile"></div>
<div id="11_tile" class="demo_11_tile"></div>
<div id="14_tile" class="demo_14_tile"></div>
<div id="12_tile" class="demo_12_tile"></div>
<div id="13_tile" class="demo_13_tile"></div>

CSS:

body
{
background-color: blue;
width:100%;
}

div{  
    /*display: inline;*/
    display:inline-block;
    background-color:black; 
    width: 200px; 
    height: 200px; 
    margin: 10px; 
    padding: 5px; 
    border: solid 2px yellow;

}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

Inline elements cannot have a set width or height.

Block elements cannot be side-by-side (float is cheating :p)

display:inline-block is the best of both worlds ;)

Upvotes: 1

Related Questions