Width: 100% is not quite 100% - html

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">Legend!</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?

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.

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.

try adding this line at the top of the css:
*{
padding: 0;
margin: 0;
outline: 0;
}

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.
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.
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.

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.

Related

How to ensure that a DIV comes below the navbar?

I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.
<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>
<div id="application">Shazoo</div>
My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.
To avoid adding the margin or an extra div, just add top padding to your body like this:
body {
padding-top: ABCpx;
}
Where ABCpx is the height of your fixed navbar.
If the navbar is positioned using "fixed" then I adding margin-top to the following div would, in my opinion, be the correct method, or else adding padding.

Overriding BootStrap CSS - difficulty understanding specificity

I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.
I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.
My HTML header container reads:
<div class="header">
<div class="row">
<p id="navigator">
[nav-pills code]
</>
</div>
</div>
With a lot of researching into specificity I thought this may be my problem so I tried CSS code:
.header .row #navigator {
background-color: #CCCDD9;
}
to no avail, but found that simply did work:
.header .row {
background-color: #CCCDD9;
}
now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?
Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?
In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.
In other words, this is not a specificity issue.
<div class="header">
<div class="row">
<div class="col-sm-12">
<p id="navigator">Testing</p>
</div>
</div>
</div>
Bootply Example
After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
</div>
</div>
CSS:
.nav-pills {
background-color: #CCCDD9;
}
Bootply

Element ignores padding of container element

I have the following HTML/CSS code:
<div id="container" style="padding:5px; width:600px;">
<div id="panel">
<a style="padding:5px; color:#ffffff; background-color:#000000;">Page 1</a>
<!-- Other anchor elements -->
</div>
<!-- Other panels -->
</div>
I struggle to understand why the #panel element sits comfortably within the #container; obeying the padding rules of it, whereas padding of the anchor element within the #panel overlaps the #container. Would anyone mind explaining why this is the case, and in doing so, perhaps suggest a fix?
I think because its an inline element this occurs, if you change its display to inline-block the padding no longer overlaps. DEMO

CSS Min-Height Not Working On All Browsers

I have been working on a site lately. I am attempting to get a border that surrounds all my content and is at least as tall as the page is. My #Container is the div that should expand to fill the full page. I am attempting to use the min-height:100%; in my css, but for some reason it isn't expanding the border down the whole page. This is my website. The home page is a basic html setup.
<div id="Container">
<div id="header">
<div id="menu">
<ul id="navbar">
<li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li>
<li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li>
<li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li>
<li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li>
<li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li>
<li><a id="nav6" class="nav-text" href="#">Info</a></li>
<li><a id="nav7" class="nav-text" href="#">About</a></li>
<li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li>
</ul>
</div>
</div>
<div id="content">
<h3>Home Page</h3>
</div>
<div id="footer">
<div id="footertext">Copyright © UsedAtCollege.com</div>
</div>
</div>
My CSS is fairly simple too. I have a CSS reset, that I don't think is affecting it because I took it out and it still had the problem.
* {
margin: 0;
padding: 0;
}
#Container {
width:980px;
min-height:100%;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border-style:solid;
border-width:1px;
border-color:rgb(154,154,154);
}
So that's the CSS control for the div wrapping my entire page in.
I just want to know if anyone knows why the min-height is not getting the border down all the way to the bottom of the screen?
Add this to your CSS
html, body {
height: 100%;
}
Something like Firebug or DOM-Inspector would come in handy in such cases. If you fire up Firebug, and see the content of your page in Firebug, you will notice that your body itself doesn't expand through the entire page, it expands only upto around half the page length, the same position where the bottom border is showing. This is because the body will expand only as per its content, the content being minimal here, the body expands only as much, and so does the min-height: 100%.
You can get around this by wrapping the entire page content inside an absolutely positioned wrapper div, setting its top and left values to 0px, and height and width to 100%. Then the border would expand upto the bottom of the page. Of course Firebug would still show the body expanding upto half page only, for absolutely placed elements don't contribute to the natural dimensions. For that, you will have to use relative positioning, and adjust margin-top to the requisite value in order to have the effect.

How do I make two elements align side-by-side in a different width container?

For example:
<!-- make sure the link block fulfill the whole container -->
a {display:block;float:left;border:1px solid #ccc; width:48%}
<!-- work great in width:400px; -->
<div id=container1 style="width:400px">
<a href="" >first element</a>
<a href="" >second element</a>
</div>
<!-- not good! no enough space for second link block in my situation test in firefox-->
<div id=container1 style="width:200px">
<a href="" >first element</a>
<a href="" >second element</a>
</div>
So, is there a way to make them all fulfill and align side by side in different width of containers!?
Thank you very much!!
It looks like you're making a list of links - if this is the case, you should use (instead of <div>) the <ul> tag with <li> and <a> inside.
If you do this you can apply the width/float rules to the <li> instead, and apply the border and display: block to the <a> tag.
I changed your width to 50%, as that's obviously what you're trying to achieve.
Live Demo
Here are two alternate solutions which will work only in modern browsers/IE8+:
You can use the outline property instead of border.
See: https://developer.mozilla.org/en/CSS/outline
Live Demo
You can use box-sizing: border-box.
See: https://developer.mozilla.org/en/CSS/box-sizing
Live Demo
Set margin:0; padding:0; for both container1 and a tags. That could be the problem.in