CODEWITHSUNDEEP
htmlcss
user3406220
user3406220

Reputation: 437

Horizontal div alignment

Good Day.

I am creating a somewhat percentage bar using a given width in input style. I want the given div to be horizontally align with each other but not overlapping, just following after each other. How can I possibly do that?

Here is a simple code

http://jsfiddle.net/XU3JM 

<html>
<head>
<style>
#one{
    background: green;
    height: 20px;

}
#two{
    background: blue;
    height:20px;
}
#three{
    background: gray;
    height:20px;
}
</style>
<body>
        <div id="one" style="width:20px;"></div>
        <div id="two" style="width:30px;"></div>
        <div id="three" style="width:40px;"></div>  
</body>
</head>
</html>

The width has no constant value so I can't just put margin-left with it. I've been tweaking with this fall back code. No such luck. Thanks in advance.

Upvotes: 0

Views: 131

Answers (4)

Rajib B
Rajib B

Reputation: 53

#first{
    background: green;
    height: 20px;
    margin-left: 2px;
    color: white;
    float: left;

}
#second{
    background: blue;
    height:20px;
    margin-left: 2px;
    color: white;
    float: left;
}
#third{
    background: gray;
    height:20px;
    margin-left: 2px;
    color: white;
    float: left;
}

 <div id="first" style="width:20px;">20</div>
        <div id="second" style="width:30px;">30</div>
        <div id="third" style="width:40px;">40</div>

Upvotes: 0

Idrizi.A
Idrizi.A

Reputation: 12080

This is probably going to help

#one,#two,#three{
    height: 20px;
    padding: 0;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

It also supports older IE versions

http://jsfiddle.net/XU3JM/2/

Upvotes: 1

user3554382
user3554382

Reputation: 115

Use display:inline-block; for each div to be centre aligned and wrap them in a new container with text-align: center; applied to it.

Upvotes: 0

Omega
Omega

Reputation: 3038

Add this css:

#one, #two, #three {display:inline-block;}

http://jsfiddle.net/h35N6/

Or this css:

#one, #two, #three {float:left;}

http://jsfiddle.net/h35N6/1/

Upvotes: 1

Related Questions