CODEWITHSUNDEEP
htmlcss
user3385997
user3385997

Reputation: 67

HTML & CSS: Positioning and/or Float Issue?

I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser

I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:

Current output:

http://postimg.org/image/l2rxf4603/

If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!

HTML & CSS Code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Rob's BBC</title>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">

    body {
       margin: 0;
       font-family: Arial, Helvetica, sans-serif;
    }

    #topbar  {
       background-color:#7A0000;
       width: 100%;
       height: 45px;
       color: #FFFFFF;
    }

    .fixedwidth  {
       width: 1050px;
       margin: 0 auto;
       /* background-color: green; */
    }

    /* BBC Logo */
    #logodiv  {
      padding-top: 8px;
      float: left;
      border-right: 1px solid #990000;
      padding-right: 15px;
    }

    /* Sign In Text */
    #signindiv  {
      font-weight: bold;
      font-size: 0.9em;
      float: left;
      padding: 5px 50px 8px 8px;
      border-right: 1px solid #990000;
    }

    /* Sign In Image */
    #signindiv img  {
      position: relative;
      float: left;
      margin: 6px 0 0 2px;
    }

    #signindiv p {
      float: left;
      margin: 10px 0 0 4px;
    }

    #topmenudiv  {
      float: left;
    }

    #topmenudiv ul  {
      float: left;
      margin: 0;
      padding: 0;
    }

    #topmenudiv li  {
      list-style-type: none;
      font-weight: bold;
      font-size: 0.9em;
      border-right: 1px solid #990000;
      height: 100%;
      padding: 15px 20px 10px 20px;
      text-align: center;
      float: left;
    }

    #searchdiv  {
      float: left;
      padding: 7px 0 0 10px;
    }

    #searchdiv input  {
      height: 25px;
      border: none;
      font-size: 0.9em;
      padding-left: 5px;
      padding-right: 22px;
      background-image:url('images/magnifyglass.png');
      background-repeat: no-repeat;
      background-position: right center;
    }

    .break  {
      clear: both;
    }

    #newsbar  {
       background-color:#990000;
       width: 100%;
       height: 45px;
       color: #FFFFFF;
    }
    </style>
    </head>
    <body>


    <div id="container">
        <div id="topbar">
            <div class="fixedwidth">
               <div id="logodiv">
                  <img src="images/bbclogo.png" alt="bbclogo" height="28" />
            </div> <!-- logodiv -->
            <div id="signindiv">
                <img src="images/signinlogo.png" alt="signinlogo" />
                <p>Sign In</p>
            </div> <!-- signindiv -->
            <div id="topmenudiv">
                <ul>
                   <li>News</li>
                   <li>Sports</li>
                   <li>Weather</li>
                   <li>iPlayer</li>
                   <li>TV</li>
                   <li>Radio</li>
                   <li>More...</li>
                </ul>
              </div> <!-- topmenudiv -->

            <div id="searchdiv">

              <input type="text" placeholder="search" /> 

            </div> <!-- searchdiv -->

            <div class="break"></div>

            <div id="newsbar">

              <div class="fixedwidth">

              </div>  

            </div> <!-- newsbar -->


            </div> <!-- fixedwidth -->
        </div> <!-- topbar -->

    </div> <!-- container -->


    </body>
    </html>

JsFiddle: http://jsfiddle.net/1f030av9/

Upvotes: 0

Views: 86

Answers (3)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15847

your fiddle

It works for me

It is stretching to 100%

with slight edits not relating to your issue though

#newsbar  {
   background-color:#990000;
   width: 100%;
   height: 45px;
   color: #FFFFFF;
    clear:both;
}

#searchdiv  {
   float: left;
   padding: 7px 0 0 0px;
 }

Removed padding-right too from #searchdiv input too

Upvotes: 0

Hristo Valkanov
Hristo Valkanov

Reputation: 1687

Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.

Changed css:

#searchdiv  {
  float: left;
  padding: 7px 0 0 10px;
}

Became:

#searchdiv  {
  float: left;
  padding: 7px 0 0 0px;
}

Removed line padding-right: 22px; from #searchdiv input

Here's a fiddle.

Upvotes: 3

Arty
Arty

Reputation: 867

Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"

Upvotes: 1

Related Questions