CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Robolisk
Robolisk

Reputation: 1792

Horizontal block alignment in CSS

I am learning to bear with me.

I want to have 3 separate blocks within a container, and through css have them inlined, for example

the html (rough idea)

<div class="content-container">
    <div class="block1">
        <img scr="blockimage1" />
    </div>

    <div class="block2">
        <img scr="blockimage2" />
    </div>

    <div class="block3">
        <img scr="blockimage3" />
    </div>
</div>

the css (rough idea)

.content-containter
{
  width:1500px;
  margin:40px auto 0 auto;
  padding:10px;
}

.block1
{
  width:500px;
  float:left;
}

.block2
{
  width:500px;
  float:center;
}

.block3
{
  width:500px;
  float:right;
}

What's happening to me is they are just all aligning vertically below each other. Not next to each other in a horizontal line. I've tried many things and the closest I got was making a grid system with bootstrap but I ran issues with that later on so I thought I'd try a new approach.

Upvotes: 0

Views: 104

Answers (1)

m4n0
m4n0

Reputation: 32255

You need to clean your HTML, CSS and use a simple solution. View the result in full screen. Display the blocks in a line using display: inline-block

.content-containter
{
  width:1500px;
  margin:40px auto 0 auto;
  padding:10px;
}

.block {
    display: inline-block;
}
<div class="content-container">
    <div class="block">
        <img src="http://placehold.it/500x500" />
    </div>


    <div class="block">
        <img src="http://placehold.it/500x500" />
   </div>

    <div class="block">
        <img src="http://placehold.it/500x500" />
    </div>
</div>

Upvotes: 2

Related Questions