I tried the following html code (an example from w3schools site):
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;margin-top:20px">
Copyright © W3Schools.com
</div>
</div>
</body>
</html>
And this is the output:
I need to add a space between the sections #footer and #content, and as you can see I tried using the margin-top attribute, but any value I use (in my example 20px) does not change the result: there is no space between the two sections.
How can I solve this problem?
Another reason why floats suck as much as they rock.
You can add an empty div in between the footer and the content like...
//content html
<div style='clear:both;'></div>
//footer html
http://jsfiddle.net/rK5zV/1/
Or you can make the footer a float also with a width of 100% like...
http://jsfiddle.net/7KZy9/
Other solutions can be found here...
Why top margin of html element is ignored after floated element?
You can add to content margin-bottom:20px;
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;margin-bottom: 20px;">
You can place all your elements apart from the footer in a wrapper that has margin-bottom: 20px:
<body>
<div id="container" style="width:500px">
<div id="wrapper" style="margin-bottom: 20px; border: 1px solid black; width: 100%; float: left;">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
Here is a jsFiddle that demonstrates the behavior.
I gave your footer relative positioning and used the top attribute
Here is a working DEMO
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:left;text-align:center;position:relative;top:20px">
Copyright © W3Schools.com
</div>
</div>
Try making footer display: inline-block; width: 100%. It's not ideal, but it works.
After two blocks with styles float you should to use element with style cler:both;
You code view like this
<div id="content">
...
</div>
<div style="clear:both;"></div>
<div id="footer">
...
</div>
Related
please take a look at my sample code
<div class="container-fluid">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
the picture is in parallax mode but take a look at the screenshot it still has padding.
im trying to achieve the same result as this site: http://remtsoy.com/tf_templates/traveler/demo_v1_7/index.html
JS Fiddle:
http://jsfiddle.net/uf9np3kq/
The default style of container-fluid has padding left and right of 15px. you can override the default behaviour by applying the following style:
.container-fluid{
padding: 0;
}
.container-fluid{
padding: 0 !important;
}
section.parallax-bg-1{
background-size: cover;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
</div>
change
<div class="container-fluid">
....
</div>
To
<div class="container-fullwidth">
....
</div>
You might want to use the div class of jumbotron.
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p>Subtitle>
</div>
</div>
It would look something like this: http://getbootstrap.com/examples/jumbotron/. Then you can apply the styles as you would like.
Just wrap your content in a div.row: http://jsfiddle.net/uf9np3kq/1/
Just swap your <section> and your .container-fluid. Assuming that your section has the background image. See updated fiddle below:
Fiddle
Current:
<div class="container-fluid">
<section>...</section>
</div>
Change to:
<section>
<div class="container-fluid">...</div>
</section>
Note: This also applies to .container not just .container-fluid
<p>if you using vb.net so please go **-Layout.chtml** and find</p>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<p>and change it to the </p>
<div class="container-fluid">
<section>
#RenderBody()
</section>
</div>
<hr />
<div class="container-fluid">
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
**i hope this method usefull for you..**
I have just changed my container div tag to expand in height automatically, but now i have an issue with the border, it is only visible at the very top of the page and i need it to show all around, the code of the page is below:
<!doctype html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<div id="container" style="width:500px; border: 2px solid black; margin:auto">
<?php include "header.php"; ?>
<div id="content" style="background-color:#EEEEEE; clear:both; width:500px; float: left">
<p align="center"><b>Quiz 1</b></p>
// There is some more code in the page
</div>
<?php include "footer.php"; ?>
</div>
</body>
</html>
header.php:
<div id="header" style="background-color:#FFA500; width:500px; clear:both; height:75px; float: left" align="center">
<h1>Quiz Name</h1>
</div>
footer.php:
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width:500px; height:25px; float: left">
Copyright/Disclaimer
</div>
Your main issue is that everything is floating. You need to clear those floating elements for that container div to appear correctly. One way is to add a clearing div before the </div> for container: <div style="clear:both;"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Try adding this code before </body>:
<div style="clear:both;"></div>
Following HTML block:
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
</div>
</body>
</html>
Produces following:
How can I have Karl Mac too covered with color of parent container in this 2 column layout?
If I add "overflow:auto", it gets fixed in Firefox and Chrome. But issue persists in IE.
thanks!
As you've done for Chrome & Firefox:
overflow: auto;
To make it work in old IE as well:
overflow: auto; zoom: 1;
zoom enables "hasLayout" in old IE, which resolves many CSS bugs. There are also other ways to enable hasLayout, for more info: http://www.satzansatz.de/cssd/onhavinglayout.html
You need to <div style="clear:both;"><div> in the main div.
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
<div style="clear:both;"><div>
</div>
</body>
</html>
Code: http://jsfiddle.net/cCuab/
I have simple example with a header and content divs. I want there to be a 10 pixel margin after the header div, but it is showing up after the content div. The header div has two floating divs. Following is the code:
<style type="text/css"
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link" style="float:right;">
Link
</div>
<div id="header_clear"/>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Here's what it looks like. You can see that the 10px margin is below the content div instead of the header div.
margin-bottom not working
<style type="text/css">
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link">
Link
</div>
<div id="header_clear"></div>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Seems it didnt like the self closing div
I have a question about css clear float.
My question is when I declare div{float:left;} to all the page, then in some part, I still want some div display center of the screen, like width:960px;margin:0 auto. How to clear this div's float?
see code in: http://jsfiddle.net/37wnT/ and review in http://jsfiddle.net/37wnT/show/
I need div#nav and div#content these two div center of the screen, but other div still obey the rule float:left;
I have modified your code little bit. take a look.
<html>
<head>
<style>
div.main{float:left;}
#header{width:100%;height:100px;}
#nav{clear:both;width:800px;margin:0 auto;}
.nav{width:200px;text-align:center;font:16px/150%;}
#wrap{width:100%;height:100%;}
#content{clear:both !important;width:960px;height:100%;margin:0 auto;}
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;}
</style>
</head>
<body>
<div id="header">
<div id="nav">
<div class="nav main">home</div>
<div class="nav main">info</div>
<div class="nav main">products</div>
<div class="nav main">cantact</div>
</div>
</div>
<div id="wrap">
<div id="content">
<div class="col main" >ds</div>
<div class="col main">ds</div>
<div class="col main">ds</div>
</div>
</div>
</body>
</html>
This is the new jsfiddle
<div id="content">
<div class="col">1</div>
<div class="col" >2</div>
<div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here
</div>
I am not sure if this is what you want.