Div Not Growing with content

Question

I'm having a big trouble... i cant make a div grow with content... i've got this HTML to fix it here... but i cant do that... can someone help me with this...??

I Uploaded the link here: http://efdutra.com/help

The div that i need to grow, well.. you will see the Lorem Ipsum getting over the footer... :p

There is some part of the html:

 <div id="boxes">
    <div id="boxFinal">
        <div id="linksBoxFinal">
            <ul>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
                <a href="#"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li></a>
            </ul>
        </div>
        <img id="barraFinal" src="img/barraBoxFinal.png" />
    </div>
</div>

And here the css:

 #boxes{
margin:0;
padding:0;
position:relative;
float:left;
height: 100%;
width: 100%;
overflow: none;
 }
 #boxFinal{
margin:15px 0 0 8px;
padding:0;
float:left;
position:relative;
width:100%;
max-height:100%;
overflow:inherit;
   }

Can someone please help me...?

You need to [clear](http://stackoverflow.com/questions/639925/div-collapse-when-using-float) `#boxFinal` as its height has collapsed due to having floated descendants — Adrift, Apr 23 '13 at 14:33

score 2 · Accepted Answer · answered Apr 23 '13 at 14:45

Having played around with your styles I see a lot of things wrong. Firstly you do not need to float everything left. next you need to add lis to around you anchor tags in the ul. third you need to remove the absolute positioning of #lineBoxFinal. If you use the following styles (replacing your existing ones) then the footer should work properly

//line 241
#linksBoxFinal ul {
    margin: 5px 0 35px 15px;
    z-index: 3;
}

//line 262
#barraFinal {
    position: relative;
    margin: 0 110px;
    z-index: 2;
    clear: both;
}

Totally agree. And maybe to get rid of the left padding of `#linksBoxFinal ul` — core1024, Apr 23 '13 at 14:49

score 1 · Answer 2 · answered Apr 23 '13 at 14:34

1

Thats because position:absolute on div[.linksBoxFinal]>ul

Thats would be in #linksBoxFinal ul on line 241 in your style.css

. .

try this:

<ul style="position:relative;">

(also, remove the not so needed margin bottom)

answered Apr 23 '13 at 14:34

Raheel Hasan

5,753
4
39
70

score 0 · Answer 3 · answered Apr 23 '13 at 15:20

0

as to your question about putting an li inside an anchor, i believe the answer is no. Anchors cannot house block level elements.

answered Apr 23 '13 at 15:20

Ghost Echo

1,997
4
31
46

Div Not Growing with content

3 Answers3