How could I possibly align DIVs horizontally?

Question

I've been searching everywhere and trying many things myself as to how I could possibly align DIVs horizontally. I'm probably thinking this in the wrong way but I could love to recreate this inside a web browser that will fit itself to the user's browser size, and when brought down to a certain size, such as an iPhone or other smart phones, it would change to another layout.

Here is an example of what I mean.

Example

Thanks for your help!

make your page responsive so different CSS will be used for smartphones/tables and computer browsers — Ben Van Hees, Jul 03 '13 at 13:44
You will need to put some effort into your question before people put their effort into it ... — webnoob, Jul 03 '13 at 13:44
cool drawing :). But really, this is quite basic stuff in webdesign, read up on `float` as a style/css attribute — cypherabe, Jul 03 '13 at 13:46
this question was asked many times before. searching the page first maybe answers your question. take a look at [How do I align spans or divs horizontally?](http://stackoverflow.com/questions/225956/how-do-i-align-spans-or-divs-horizontally) — Przemek, Jul 03 '13 at 13:46
Well I'm trying to get divs to stack beside each other to show different weather of the week. I'd like it to fill the entire page (width and height), no matter the browser's size. Just as long as I get a simple skeleton the rest can be done. — Brad, Jul 03 '13 at 13:47
Ah he wants to use media queries. he wants a responsive design. lol that makes sense. — Kees Sonnema, Jul 03 '13 at 13:49
@KeesSonnema I don't know that I would say he wants responsive, I would assume he wants to swipe left and right to show a different day on mobile, rather than scrolling down. In which case he needs to start learning C# and some xcode and just make an app. — Michael, Jul 03 '13 at 13:51
It's responsive anyway, because he's talking about 'a different layout' — Kees Sonnema, Jul 03 '13 at 13:52
Yes, @KeesSonnema that's right. I want a responsive design. I'm not a huge HTML/CSS person but I'm trying to learn as much as I can. — Brad, Jul 03 '13 at 13:59
Once most major browsers have full support, [flexboxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) will probably be a good way to go. (Of course, you could always start using them now with the future in mind.) There's also [the CSS multi-column properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts), which most desktop browsers do provide basic support for and mobile Firefox, at least, also does. — JAB, Jul 03 '13 at 14:00

chockleyc · Accepted Answer · 2013-07-03T14:20:37.030

5

For putting divs next to each other you are going to want to use float: left;

<div id=container>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

Then in css:

#container {
  width: 1000px;
}
.section {
  position: relative;
  float: left;
  width: 248px;
  border: 1px solid black;
}

Here is an Example

If you want things to be responsive there are a couple different options depending on what you want to do. The most effective way is probably to look in to the @media tag. Link

UPDATE:

Here is another example where the divs will automatically scale to the browser width.

Example

edited Jul 03 '13 at 14:20

answered Jul 03 '13 at 13:50

chockleyc

581
2
5

4

What was the downvote on this for? – Michael Jul 03 '13 at 13:52
1

Upvoted. This answer doesn't deserve downvote. – JosephGarrone Jul 03 '13 at 13:53
Yes, this is similar to what I was looking for. Now it's just the matter of making the entire thing fill the web browser no matter the size and adjust each div accordingly. – Brad Jul 03 '13 at 13:55
@Brad look at using % widths...If you have 10 sections, make them `width: 10%` – JosephGarrone Jul 03 '13 at 13:55
@Asryael has the right idea with using % but you have to be careful of your borders if you are doing that. If you have 10 divs with 10% each but you give them a border then they will start to stack because the border makes them larger than 10%. – chockleyc Jul 03 '13 at 14:15
@chockleyc I don't plan to use borders in this little project. It'll just be the colors of each different day that separates them. – Brad Jul 03 '13 at 14:21
@Brad I have updated my answer with the size adjustment requirement you requested. – chockleyc Jul 03 '13 at 14:21
1

@Brad The big thing to consider is that padding and border is calculated into the width of your box, margins will obviously effect it also. You can also box-sizing: border-box; to tell the width of your box to include padding adn border into that calculation. – Michael Jul 03 '13 at 14:28
@Michael Thank you, it's getting a bit closer to what I'm looking for! Once I make a mock up I'll link to it and see what to do from there. – Brad Jul 03 '13 at 14:30
@Brad, see my edit on the comment above about border-box, it will make your life easier if you can utilize it. Use caniuse.com to check compatibility on it, I believe it's compatible for IE8 and above. – Michael Jul 03 '13 at 14:31
@Michael now what about making the divs hugging to the very border of the browser as well as adjust to the entire height of it? – Brad Jul 03 '13 at 14:41
1

@Brad here you go: http://codepen.io/chockleyc/pen/ktlAp – chockleyc Jul 03 '13 at 14:47
@Michael http://codepen.io/brad/pen/jmBwd There is what I have so far. I'm loving it! Now to find a way to stop the pesky
things. Probably fixable with adding padding to title elements? – Brad Jul 03 '13 at 15:00
1

Padding will replace the
elements yes. Here is a resource for that - http://www.w3schools.com/css/css_boxmodel.asp – chockleyc Jul 03 '13 at 15:06
1

@chockleyc beats me to it each time. Just modify your padding-bottom of your elements to push them up and down vertically per your needs. – Michael Jul 03 '13 at 15:27

How could I possibly align DIVs horizontally?

1 Answers1