CODEWITHSUNDEEP
htmlcss
Ajay
Ajay

Reputation: 7428

html float problem

I have the following code:

<div "background-color:green">
    <div "float:left">something</div>
    <div "float:right:>something else</div>
<div>

Why does the background color not appear in this case? What needs to be done to make it appear {Code simplified for understanding , may not be in the approporiate syntax}

Upvotes: 1

Views: 209

Answers (3)

alex
alex

Reputation: 490233

You need to clear the div. You can use clear: both on an element beneath, but I often find this is easier:

<div style="background-color:green; overflow: hidden;">
    <div style="float:left;">something</div>
    <div style="float:right;">something else</div>
<div>

Notice the overflow: hidden.

Of course, it only works where you don't require elements to leave their containing elements.

Upvotes: 2

ChaosPandion
ChaosPandion

Reputation: 78262

You need to write in the style attribute

<div style="background-color:green;">
    <div style="float:left;">something</div>
    <div style="float:right;">something else</div>
<div>

Upvotes: 0

Tordek
Tordek

Reputation: 10872

A floated object is "lifted" from its containter. The bottom edge of the outer div doesn't stretch to its content anymore.

An option is to add an element with clear (clear takes a direction (either left, right, or both), and pushes itself below a float it would touch:

<div style="background-color: green">
    <div style="float: left">something</div>
    <div style="float: right">something else</div>
    <br style="clear: both;" />
<div>

Upvotes: 1

Related Questions