I have hardly written any HTML/CSS and am already encountering a problem. My header element is not automatically expanding it's height to wrap it's children. I've done a bunch of research and fooled around in the Developer Tools, but can't seem to put my finger on it. I'm sure it's really simple, but what is it I'm overlooking here?
<!DOCYTPE html>
<head>
<title>Page Title</title>
<style>
header {
width: 96%;
height: auto;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
section {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
footer {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
h1 {
font-size: 2em;
margin: 1em auto;
}
img {
max-width: 100%;
/* This tells the browser to set the image to the full-width of it's containing element. */
}
.group-icon {
width: 10%;
position: relative;
float: left;
margin: 0 1% 0 0;
}
.group-name {
position: relative;
float: left;
}
</style>
</head>
<body>
<header>
<div class="group-icon">
<img src="images/sailing-icon.png">
</div>
<div class="group-name">
<h1>Pirates in the Bay</h1>
</div>
</header>
<section>
<h2>TEST</h2>
</section>
<section>
<h2>TEST</h2>
</section>
<footer></footer>
</body>
</html>
It's because you've floated elements inside the header (group-name and group-icon).
Try adding overflow: hidden to the header styles. The will 'clear' the floated elements effectively.
See the demo here.
http://jsbin.com/EPelEMA/1/edit
Some more information about the overflow property here: http://css-tricks.com/the-css-overflow-property/
Related
My aside element is positioned at the bottom...it should be on top, at the same level as my section...what I'm doing wrong??? I want these two columns to be at the same level, so I used floats in both, section and aside, but obviusly is not working...please help!
And also I can't
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout with Floats</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<body>
<header>
<h1>Leonardo da Vinci</h1>
<nav>
<ul>
<li><a>Inicio</a></li>
<li><a>Bio</a></li>
<li><a>Obras</a></li>
<li><a>Legado</a></li>
</ul>
</nav>
</header>
<section>
<div class="columnas">
</div>
<div class="columnas">
</div>
<div class="columnas">
</div>
<div class="columnas">
</div>
</section>
<aside>
<div>
</div>
</aside>
</body>
</html>
My CSS code:
header {
background: black;
color: white;
overflow: hidden;
}
header h1 {
text-align: center;
width: 50%;
margin: 0 auto;
padding: 55px 0 0 0;
text-transform: uppercase
}
header ul {
padding: 0;
list-style: none;
overflow: hidden;
text-align: center;
}
header ul li {
width: 50%;
margin: 0 auto;
display: inline;
text-transform: uppercase;
padding: 5px;
}
section {
width: 45%;
overflow: hidden
float: left;
}
section .columnas {
background: red;
width: 280px;
height: 200px;
margin: 15px 15px 0 0;
float: left;
}
aside {
width: 30%;
float: right;
}
aside div {
background: blue;
width: 200px;
height: 200px;
If I understand it properly, and if this is the solution you want, you were just missing a semi-colon after hidden.
section {
width: 45%;
overflow: hidden
float: left;
}
You can add margin-top: 15px to aside to get it at the exact level.
aside {
width: 30%;
float: right;
margin-top: 15px;
}
I am having an issue that when i float two div(s) (one left, one right) i have this strange padding that i cannot find in my code in the following link you will see my issue. The div on the right (sidebar) has some kind of padding to the right and i cannot figure out how to remove it.
So my question is: How do i remove the above mentioned padding?
Attached bellow is my HTML code followed by CSS.
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0px;
}
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0px;
padding: 0px;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
margin: 0px;
float: right;
padding: 0px;
}
<body>
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
</body>
The borders do not contribute to the width by default on standards compliant browsers.
Either fix this by adjusting the width to account for the borders, or change the box sizing model;
https://developer.mozilla.org/en/docs/Web/CSS/box-sizing?v=control
border-box
The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.
Adding box-sizing: border-box; is a fix, that will make the borders count towards the width.
Doing width: calc(75% - 2px) can let you specify what the width should be in a way that is easy to read.
With border-box
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0px;
}
#wrapper > div {/*direct div descendents of wrapper only*/
box-sizing:border-box;
}
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0px;
padding: 0px;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
margin: 0px;
float: right;
padding: 0px;
}
<body>
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
</body>
With Width
Edit: I wasn't able to successfully create a snippet for width, some more tweaking may be required with the height, clearing the footer, or floating both the body and sidebar in the same direction? or adding content.
A warning about using calc() for the width:
the default border sizes are not standard across browsers. in order to properly specify a width, you will need to declare the size of the border using a cross browser compatible method.
The default box model adds the width of borders (and padding) to the width you've specified for an element, so .body and .sidebar are actually each slightly wider than 25% and 75%, hence they don't fit into one row.
To change the box model so that the width of borders is included in the widths you specify, use box-sizing: border-box.
E.g.
* {box-sizing: border-box;} /* Make all elements use 'border-box' */
Here's your updated JSFiddle
Here's info about CSS Box Sizing
box-sizing: border-box : The width and height properties (and min/max properties) includes content, padding and border, but not the margin.so when you use of padding or border no affect on width that you defined.
For Fix:
Just add #wrapper * {box-sizing: border-box;}
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0px;
}
#wrapper * {
box-sizing: border-box;
}
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0px;
padding: 0px;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
border-width: 3px;
margin: 0px;
float: right;
padding: 0px;
}
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
It's not padding, its width of the borders I guess. If you remove the borders it will work
.body {
width: 75%;
height: 80%;
border: none;
float: left;
margin: 0px;
padding: 0px;
background-color: green;
}
.sidebar {
width: 25%;
height: 80%;
border: none;
margin: 0px;
float: right;
padding: 0px;
background-color: red;
}
In my experience, using CSS floats makes my HTML and CSS prone to weird overflow/misalignment issues like this. Notice how if I declare the property-value pair overflow: hidden; on #wrapper they seem to align. That said, the right-hand side border of each still gets truncated. Im able to fix this by including [box-sizing][1]: border-box; on the direct descendants of the #wrapper child (i.e., using the #wrapper > * selector). This property simply ensures that the border-width is included along with the usual content and padding when specifying widths and/or heights.
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0;
overflow: hidden;
}
#wrapper > * { box-sizing: border-box; }
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0;
padding: 0;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
margin: 0;
float: right;
padding: 0;
}
<body>
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
</body>
How can I remove the white border on bottom of the browser (google chrome)?
This is the code I have used:
footer {
color: white;
width: 101%;
margin-left: -8px;
background-color: #343434;
margin-left: -16px;
width: 101.5%;
margin-top: -8px;
height: 40px;
z-index: 100;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
<main>
<!--main things-->
</main>
<footer>
<div>
<p>FastCycle werdt gecreëerd door HP-programming vzw. Copyright © 2015</p>
</div>
</footer>
I have try to place the margin-button to set on zero but it didn't help. Also I have place the margin-left to -16px and width to 101.5%? Why?
Can anyone help me?Thanks
You can try adding the following to the <body> tag:
<body style="padding: 0; margin: 0;">
or alternatively, create a new CSS class:
body {
padding: 0;
margin: 0;
}
If that doesn't work, in Chrome, if you press F12, it will bring up a panel that allows you to view the styles of elements. Hover over the elements until you find the one that's creating the whitespace, and remove the padding/margin from it.
Try to add to your css
body{
margin:0;
}
And some cleaning for your css footer
footer {
color: white;
width: 100%;
background-color: #343434;
height: 40px;
z-index: 100;
bottom:0;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
Use this HTML:
<body>
<div id="footer">
<div id="inner">
FastCycle werdt gecreerd door HP-programming vzw. Copyright © 2015
</div>
</div>
</body>
Use this CSS:
body {
margin: 0px;
padding: 0px;
}
#footer {
background-color: #343434;
color: #ffffff;
height: 40px;
margin: 0px;
padding: 0px;
width: 100%;
}
#inner {
margin: 0px 0px 0px -500px;
padding: 0px;
position: relative;
left: 50%;
top: 0px;
width: 1000px;
}
Also, you've set the Width and the Left Margin twice with 2 different values so you might want to clean that up. Regardless my code gives the same result except without the white space. Feel free to add back some of the stuff I've taken out if other elements depend on it.
Can someone take a look at my code please and tell me:
How can I get the image to go over the <header> and <nav> so that everything else centres properly. I have tried playing with z-index and nothing seems to work.
How do I get the <section> to start under the <nav> rather than right at the top of the page behind the other elements without using loads of <br>s?
#CHARSET "ISO-8859-1";
body {
font-family: "Comic Sans MS", cursive, sans-serif
}
header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}
.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}
header h2 {
min-width: 800px;
}
nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}
nav a:hover {
color: white;
}
section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}
section h3 {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li>home</li>
<li>projects</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>
</body>
</html>
Change these css properties and you should be able to get rid of all the breaks:
section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}
.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}
No need to float left on the logo if you are doing an absolute position. Also, you you want to add top padding (the first value in the padding property) of your section to shift it down below the nav.
http://jsbin.com/woyilesoka/2/edit?html,css,output
You need to break your logo away from your other stuff. Make your logo position: absolute; and create a z-index greater than the divs below it. This way it's above your other divs, and not included in the divs. This will keep the rest of your stuff centered.
Directions:
.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}
then move the logo left.
You can make your logo position absolute so that the float of other elements do not interfere with your logo:
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
This is how your make your section below the nav bar by changing margin on the top of the section:
section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}
After searching for this topic for a while in internet, i came here with no clue. I am writing html pages where i am in a need of sticky footer, that should not change it's position even on browser resize.
What i am suffering now is, when i am changing my browser size, i am getting a horizontal and vertical scroll bar. But my footer is displaying above all the div elements. Here is my code.
HTML,
<!-- Main Content -->
<div class="wrapper">
<div id="welcomeDiv">
<label>Welcome Message</label>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div id="footerDiv">
<h5 class="copyright">© 2013 </h5>
<h5 class="footer_info">Career | Help</h5>
</div>
</div>
CSS:
/* Footer */
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 1580px;
padding: 0;
border: 1px solid #000;
}
div#footerDiv {
font-size: 10px;
color: grey;
text-align: center;
margin: 0 auto;
width: 100%;
}
div#footerDiv h5 {
font-size: 9pt;
font-weight: 300;
}
div#footerDiv h5.copyright {
margin-left: 10px;
float: left;
}
div#footerDiv h5.footer_info {
margin-right: 10px;
float: right;
}
/* Body Content styles */
.wrapper {
min-height: 100%;
height: auto !important;
}
Can some one please help me what's wrong in my code. I dont want to see cssstickyfooter.com anymore.
Thank you,
Add width and height to body and make footer width as 100%
body{
width: 100%;
height:100%;
margin : 0;
}
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 100%;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Fiddle: http://jsfiddle.net/sK9Wu/2/