Aligning DIVs side by side

HTML & CSS
1

So I have 3 image divs that I need aligned side by side… currently they are aligned vertically. I know it’s probably a simple fix but I’ve been staring at it for 3 days.

Here’s the coding for it http://jsfiddle.net/s2k01jhn/4/

2

That html hurts my eyes trying to read it, having it all bunched up together like that. Could you please format your code so that it indented properly? It would make it much easier for you to troubleshoot any problems you have with it also.

3

Use FLEX (or CSS GRID). Start here…

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>
1 Like
4

Sorry I can read my code just fine thank you. If you have a problem with it don’t help. Unless it’s critical in fixing the code itself no one asked you to judge how I write it. That wasn’t the question on hand. But thank you though. I’ll keep your comments in mind.

5

But with that the border doesnt show on top. see, the code itself has a border in css that will appear on whichever image I put in the div. Now it’s showing the border BELOW the image I’ve added… How do I fix that?

12

Give this a shot.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: inline-flex;
    justify-content: center;
}

.flex-container > div {
    background-image: url(https://thatwildhippie.com/wp-content/themes/version1/images/border.png);
    background-size: 300px 300px;
    width: 300px;
    margin: 10px;
    text-align: center;
    line-height: 300px;

}
</style>
</head>
<body>

<div class="flex-container">
    <div>Picture coming soon!</div>
    <div>Picture coming soon!</div>
    <div>Picture coming soon!</div>
</div>

</body>
</html>
1 Like
13

Uh, oh.

@thatwildhippie, Please read the first sentence of our Posting Guidelines.

Dwell on the part that says “help us help you”.

Minimized code is time consuming to read and evaluate.

as shown in fiddle (minus colors)

<div class="imageborder"><img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt=""><div></div></div><div class="imageborder"><img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt=""><div></div></div><div class="imageborder"><img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt=""><div></div></div>
<div class="clear"></div>

 
after tidy

<div class="imageborder"><img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt="">
    <div></div>
</div>
<div class="imageborder"><img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt="">
    <div></div>
</div>
<div class="imageborder"><img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt="">
    <div></div>
</div>
<div class="clear"></div>

 
manually indented

<div class="imageborder">
    <img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt="">
    <div></div>
</div>
<div class="imageborder">
    <img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt="">
    <div></div>
</div>
<div class="imageborder">
    <img src="https://thatwildhippie.com/wp-content/themes/version1/images/border_bg.png" alt="">
    <div></div>
</div>
<div class="clear"></div>
1 Like
14

@WebMachine There is a Tidy button at the top of jsfiddle that will fix this for you.

Also @ronpat

I agree code should be formatted well, but prettier and formatters make this not an issue.

2 Likes
15

Maybe if the comment would have been worded different… i.e Hey maybe you should work on your coding organization it would help you and everyone else…" but theres no need to tell me my coding “hurts your eyes”. Rudeness get’s you nowhere.

16

Perfect. I truly appreciate it!

17

For the record I don’t need someone to “do it for me” I’m perfectly capable of understanding someone explaining instead of showing. But thanks for your input.

18

Slightly improved flex container wraps at narrower widths.

<!DOCTYPE html>
<html>
<head>
<!--
https://www.sitepoint.com/community/t/aligning-divs-side-by-side/303223/12
thatwildhippie
Jul 30,2018 5:42 PM
-->
    <style>
body {
    margin:0;
}
.flex-container {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.flex-container > div {
    background-image: url(https://thatwildhippie.com/wp-content/themes/version1/images/border.png);
    background-size: 300px 300px;
    flex-basis:300px;
    margin: 10px;
    text-align: center;
    line-height: 300px;
}
    </style>
</head>
<body>

<div class="flex-container">
    <div>Picture coming soon!</div>
    <div>Picture coming soon!</div>
    <div>Picture coming soon!</div>
</div>

</body>
</html>
2 Likes
19

I was finally able to get around to looking at this.

While flexbox is ok and all, it’s overkill and an entirely new way of thinking that can quickly get very confusing. This can be fixed by simply adding display: inline-block to the .imageborder class. Divs are blocks by default.

But I do suggest learning flexbox and if you’d like to learn how to use flexbox properly, there are some games that help a lot of people that I work with:

http://www.flexboxdefense.com/

7 Likes
20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.