How to apply horizontal css to divs

Question

How do I make divs one, two, three horizontal with css?

text-align: center only puts them vertical?

<div class="container">
   <div class="one">One</div>
   <div class="two">Two</div>
   <div class="three">Three</div>
</div>

Js Code:

$(".container").css({
    "position": "fixed", 
    "margin":"0", 
    "left": "0px", 
    "right": "0px", 
    "height": "auto", 
    "min-height": "50px", 
    "z-index": "255", 
    "color": "white", 
    "line-height": "50px", 
    "padding": "16px", 
    "font-size": "1em",
    "text-align": "center", 
    "bottom": "0px", 
    "opacity": "1", 
    "background": "black"
});

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — dippas, Apr 07 '16 at 09:30
set property display to inline-block i.e display:inline-block — Rahul Jain, Apr 07 '16 at 09:32

score 1 · Answer 1 · answered Apr 07 '16 at 09:32

1

Set a width and apply display:inline-block in CSS Like this:

.container div {
    width:100px;
    display:inline-block;
}

answered Apr 07 '16 at 09:32

Axel Couturier

168
5

$("body").prepend('
One
Two
Three
'); $(".stickyDiv").css({"width":"100px","display":"inline-block"}); – Hbaecklund Apr 07 '16 at 09:39
Does not seem to do it? – Hbaecklund Apr 07 '16 at 09:39
Sorry, I have'nt the CSS when I've posted, so with `position:fixed`, it won't work... – Axel Couturier Apr 07 '16 at 09:41

score 1 · Answer 2 · answered Apr 07 '16 at 09:38

display: inline-block; could make it works.

float: left; will not works because it will puts all your div elements to the left instead of center (it will erase the text-align: center; property you put on .container)

See it here

By the way, why are you applying style with jQuery instead of CSS ?

score 0 · Answer 3 · answered Apr 07 '16 at 09:34

0

i think you have to try 'float:left'

answered Apr 07 '16 at 09:34

DsRaj

2,288
1
16
26

How to apply horizontal css to divs

3 Answers3