CODEWITHSUNDEEP
htmlcss
user3361034
user3361034

Reputation: 5

Width: 100% is not quite 100%

I have set an element's width to 100%, but the border is not going all the way to the edge of the page, It leaves maybe a two-pixel gap each side of the line.

Here is my HTML:

<body>
    <div class="headerContainer">
    </div>
</body>

Here is my CSS:

.headerContainer{
    border-bottom:black 2px solid;
    height:40px;
    width:100%;
    color:blue;
}

Also, another question. I came across this code while looking through a website:

<div class="navbar-wrapper">
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
        <h1 class="brand"><a href="#top">Legend!</a></h1>
        <nav class="pull-right nav-collapse collapse">
          <ul id="menu-main" class="nav">
            <li><a title="portfolio" href="#products">Out Products</a></li>
            <li><a title="services" href="#services">Services</a></li>
            <li><a title="news" href="#news">News</a></li>
            <li><a title="team" href="#team">Team</a></li>
            <li><a title="contact" href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
      <!-- /.container -->
    </div>
    <!-- /.navbar-inner -->
  </div>
  <!-- /.navbar -->
    </div>

And I cannot think of any reason to have that many div tags, Wouldn't one--or possibly two--do fine?

And a third question: if I have a div tag within a div tag, How will I reference it in CSS?

Upvotes: 0

Views: 114

Answers (5)

Anders &#214;stman
Anders &#214;stman

Reputation: 3832

2) The large amounts of DIV's in your example probably comes from Twitter Bootstrap. I would claim that by the use of many divs and lots of separated CSS classes Bootstrap becomes a flexible CSS framework. Useful in different layouts and good for quick mockups.

You can definitely remove alot of of the divs and combine many of the css classes, and then you have made a custom-made html/css solution that suits your meny... and menues very similiar to yours.

Upvotes: 0

TylerH
TylerH

Reputation: 21087

  1. Add body {margin: 0;} to your CSS. Body has a margin by default, and you need to remove it. Adding padding: 0; or outline: 0; (as suggested in another answer) is not necessary.

  2. Sometimes you will need extra containers in your HTML code to apply CSS to separate parts of your content. One example is when you want to have a sticky footer at the bottom of your page be separate from the rest of your page's CSS rules.

  3. Not exactly sure what you mean by your question, but you can select children of elements a number of ways. Without giving an example, you can try parentelement > childelement for immediate children.

Upvotes: 0

Ennui
Ennui

Reputation: 10190

1) Include a CSS Reset. The few pixels of space on the edges are most likely due to some kind of padding or margin on the html, body or wrapper element(s). html, body { margin: 0; padding: 0; } would also probably fix it.

2) There is probably not a need for that many nested div tags in the code you pasted, but it's hard to say without knowing the functionality (there is probably a lot of javascript involved in how that navigation works). Even so, that code can probably be significantly improved / simplified.

3) You can reference a div tag inside of a div with the CSS selector div div { } which selects all div tags that live inside at least one other div tag. div > div { } by contrast would only select div tags that are nested immediately inside another div as a direct child.

Upvotes: 1

j08691
j08691

Reputation: 207901

The body element has a default margin. Add this:

body {
    margin:0;
}

and your space goes away.

jsFiddle example

And there's no real answer to your second question. The structure can depend on numerous things.

Finally, to refer to a div in a div with CSS use div div {...} to target any descendant divs of a parent div, or div > div {...} to specifically target the child div of another div.

Upvotes: 2

nick
nick

Reputation: 3239

try adding this line at the top of the css:

*{
    padding: 0;
    margin: 0;
    outline: 0;
}

Upvotes: 0

Related Questions