0

I setup a div for my "headline" and I wanted to nest it inside the "header" div. For some reason in Chrome it is only displaying the div outside of the header div, not nested within. In the HTML I have the headline div nested in the header.

If you have any thoughts as to what's wrong with the css I would greatly appreciate it. I have used Inspect elements feature in all browsers to try and find a fix.

Thanks so much!

#header {
    height:160px;
    width:1000px;
    background-image:url(../img/green_bg.jpg);
    background-repeat:repeat-x;
}

#headline {
    float:right;
    width:660px;
    margin-right:140px;
    margin-top:115px;
    font-family:GothamBold, helvetica, arial, sans-serif;
    font-size:20px;
    color:#0f5e92;
    text-transform:uppercase;
    line-height:1.2;
}


<div id="header">

<img src="img/logo.png">

<div id="headline">Welcome! Learn about all of the programs has to help your clients with their marketing.</div>

</div>
Nick L
  • 55
  • 1
  • 5
  • You haven't contained the floated div. Try googling **clearfix**. – Paulie_D Jan 21 '14 at 17:04
  • Use `overflow:hidden` to the parent container of the floating elements. – otinanai Jan 21 '14 at 17:05
  • As far as I see, floats are troubling you, refer my answers [here](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734), and [here](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504), see if they are of any help – Mr. Alien Jan 21 '14 at 17:06
  • @Mr.Alien not necessarily a bad choice. – otinanai Jan 21 '14 at 17:07
  • @otinanai Bad - http://jsfiddle.net/mr_alien/ZSJqt/ – Mr. Alien Jan 21 '14 at 17:11
  • Can you post the html too? Should not matter much but do you know the#header is 500px smaller then #headline. – Madmenyo Jan 21 '14 at 17:15
  • @Mr.Alien It's bad ONLY in the case of not cropping shadows and in no other case. However, for me it's worse to add extra markup. – otinanai Jan 21 '14 at 17:15
  • @otinanai using clearfix, you don't need to add extra markup – Mr. Alien Jan 21 '14 at 17:16
  • Thanks for all of your replies. I will research clearfix, I have never heard of that. I tried overflow:hidden and that didnt seem to help. – Nick L Jan 21 '14 at 17:25
  • I tried to position absolute on the headline div, but unfortunately, that gives me inconsistent placement when I am on a larger screen resolution. – Nick L Jan 21 '14 at 18:20
  • I found the solution that seemed to work best. I added a position relative to the div causing the issue. Thanks again for everyone's comments. – Nick L Jan 21 '14 at 18:53

0 Answers0