CODEWITHSUNDEEP
csshtmlstyling
Kryptos
Kryptos

Reputation: 542

CSS using <div>

I am using <div> to create a horizontal bar across the screen. Within that horizontal bar, I have 3 more <div> each of a different width. They are supposed to be all in a row horizontally next to each other. Instead, they are on top of each other. How do I fix this?

Also, if I don't have any text within the <div> in my HTML code, the <div> does not appear. Ex: <div>anything</div>

JSFiddle

Upvotes: 1

Views: 103

Answers (3)

cavaliercyber
cavaliercyber

Reputation: 234

You can add css float:left to div and If you also don't want any text in div you should add css height to div.

.horizon div{
    float: left;
    height: 20px;
}

like this http://jsfiddle.net/KG5B3/

Upvotes: 1

John Conde
John Conde

Reputation: 219794

Fiddle

You can float those inner DIVs. You can also use inline-block (not shown).

<div class="horizon">
    <div class="left">left</div>
    <div class="mid">middle</div>
    <div class="right">right</div>
    <br style="clear: both" />
</div>

body {
    margin: 0;
}
.horizon {
    background: #000000;
    width: 100%;
}

div.horizon div {
    float: left;
}

.right {
    width: 25%;
    background: #ff0000;
}
.mid {
    width: 50%;
    background: #00ff00;
}
.left {
width: 25%;
    background: #0000ff;
}

Upvotes: 1

Charles380
Charles380

Reputation: 1279

Just use a float, which IS cross-browser compliant. Also you should clear your floats which can be seen on the updated JsFiddle

.horizon div{
    float: left;
}

Upvotes: 1

Related Questions