CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6197

Width is not taken right inside a div

http://jsfiddle.net/w2P7s/

<div id="a">aaa</div>
<div id="b">
    <div id="col1">col1</div>
    <div id="col2">col2</div>
</div>
#a
{
    float: left;
    width: 30%;
    background-color: red;
}

#b
{
    background-color: green;
}

#col1
{
    float: left;
    width: 50%;
    background-color: blue;
}

#col2
{
    float: left;
    width: 50%;
    background-color: yellow;
}

col1 and col2 must be inside "b" but it looks like it overflows

Upvotes: 0

Views: 54

Answers (4)

George
George

Reputation: 36784

If you have a floating <div> you can set overflow:hidden for it's neighbour. It will float next to the div and take up the rest of the available width. If you do this twice (One inside another), you'll get the result I think you're looking for:

Give #b the style overflow:hidden:

#a
{
    float: left;
    width: 30%;
    background-color: red;
}

#b
{
    overflow:hidden;
    background-color: green;
}

#col1
{
    float: left;
    width: 50%;
    background-color: blue;
}

#col2
{
    overflow:hidden;
    background-color: yellow;
}

JSFiddle

Upvotes: 1

Ali
Ali

Reputation: 86

Solution:

#a
{

    width: 30%;
    background-color: red;
}

#b
{
    background-color: green;
}

#col1
{
    float: left;
    width: 50%;
    background-color: blue;
}

#col2
{
    float: right;
    width: 50%;
    background-color: yellow;
}

Regards
Ali Muhammad

Upvotes: 0

Sumant
Sumant

Reputation: 964

we can do it 2 ways

remove float: left; from #a

OR

Use clear:both; in #b

I think u are looking for this???

Upvotes: 0

user641656
user641656

Reputation:

It looks like this is a float issue rather than a width issue. Since you have everything floating left, they're all removed from the flow and stacked next to each other, even though #col1 and #col2 have a different wrapper.

Try adding clear:left; to #b. This will force it to appear below any previous elements that are floated to the left.

http://jsfiddle.net/nathanlong/byRDq/

Explanation of the clear property: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Upvotes: 0

Related Questions