Auto re-size in Div not working

Question

I have a <div> called "bottom" which holds 2 divs together. The 2 divs inside are "manufacturers" and "main" which are located side by side with each other. What I want is that the <div id="bottom"> must be auto resizable when either the two divisions expands (the <div id="main"> lists down all the available products that is why it also has an auto height). The problem is that when I use a float property or a "display: inline" property in the main and manufacturers divs it overrides the bottom div causing it not to expand.

here's my css code:

#bottom{
    padding: 1.5em;
    margin: auto;
    margin-top: 3.7em;
    margin-bottom: 5em;
    background-color: white;
    width: 67em;
    height: auto;
}
#manufacturers{
    padding: 1em;
    width: 13em;
    height: auto;
    border: 1px solid #CFCFCF;
    font-size: 17px;
    float: left;
}
#main{
    float: right;
    padding: 0.5em;
    width: 47em;
    height: 10em;
    background: blue;
    position: relative;
    display: inline;
}

You should define the width in percentage... – Bhojendra Rauniyar Aug 11 '14 at 08:50 — Bhojendra Rauniyar, Aug 11 '14 at 08:50

score 0 · Answer 1 · answered Aug 11 '14 at 08:54

0

#main{
display: inline-block;
}

answered Aug 11 '14 at 08:54

Carol McKay

2,438
1
15
15

Vivek Pratap Singh · Answer 2 · 2014-08-11T09:14:26.647

0

you could try this:

#bottom{
    width: 100%;
}
#manufacturers{
    width: 50%;
}
#main{
    width: 50%;
}

Add above css properties in your existing CSS stylesheet. Apart from it:

Expanding Downward to fit the content is the expected behavior. If you have specified floats somewhere in your style you may need to clear them.

<div style="clear:both"></div>

edited Aug 11 '14 at 09:14

answered Aug 11 '14 at 08:57

Vivek Pratap Singh

9,326
5
21
34

my problem is that the `bottom div` which holds the 2 divs ('manufacturers' on left and `main` on right) does not expands downward. It must auto resize downward. I have no problem in its width, only with the height which must be auto resizeable once the products gets populated downward – user3819129 Aug 11 '14 at 09:06
Expanding Downward to fit the content is the expected behavior. If you have specified floats somewhere in your css you may need to clear them. – Vivek Pratap Singh Aug 11 '14 at 09:12
@user3819129 Updated my answer, you could try this. You need to clear your floats in your HTML. – Vivek Pratap Singh Aug 11 '14 at 09:16

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

In your case element with ID "bottom" collapsed because of elements inside have floats (left or right). You should use clearfix class with #bottom:

.clearfix: before,
.clearfix: after {
    display: table;
    content: " "
}
.clearfix: after {
    clear: both
}

Answer to question about "clearfix"

edited May 23 '17 at 11:57

Community

1
1

answered Aug 11 '14 at 09:07

Rakhat

4,783
4
40
50

Auto re-size in Div not working

3 Answers3