I created a web page with 3 div tags with some content in each div and with background colors set to the div elements I found some white space appearing between the div elements.
I have tried a lot to remove these white space using various properties like outline, margin, padding etc, but I failed.
I want to remove white spaces between my div without using 'float' property.
webpage snapshot
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0px;
background-color:green;
}
.container
{
margin-top:0px;
margin-bottom:0px;
margin-left:10%;
margin-right:10%;
}
.head
{
background-color:gray;
}
.nav
{
background-color:blue;
}
.content
{
background-color:lime;
}
</style>
</head>
<body>
<div class="container">
<div class="head">
<h1>Welcome to my page!</h1>
</div>
<div class="nav">
<h2>some text</h2>
</div>
<div class="content">
<p>Some text in content</p>
</div>
</div>
</body>
</html>
h1, h2, p {
margin: 0;
}
Browser adds margins on heading elements and paragraphs by default. You remove it via CSS.
The space between your divs is because of default h and p elements's margins. I added just this css rule to override default margins:
h1, h2, p{
margin: 0;
}
Please check this snippet:
body{
margin:0px;
background-color:green;
}
.container{
margin-top:0px;
margin-bottom:0px;
margin-left:10%;
margin-right:10%;
}
.head{
background-color:gray;
}
.nav{
background-color:blue;
}
.content{
background-color:lime;
}
h1, h2, p{
margin: 0;
}
<body>
<div class="container">
<div class="head">
<h1>Welcome to my page!</h1>
</div>
<div class="nav">
<h2>some text</h2>
</div>
<div class="content">
<p>Some text in content</p>
</div>
</div>
</body>
The h1, h2, p tags have by default a margin underneath them. You can achieve the desired effect by using a negative margin in the containing divs or the tags themselves
(I do not recommend the latter like most other answers do, as it will affect every h1, h2, p tags in your page)
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
background-color: green;
}
.container {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10%;
margin-right: 10%;
}
.head {
background-color: gray;
margin-bottom: -21px;
}
.nav {
background-color: blue;
margin-bottom: -21px;
}
.content {
background-color: lime;
}
</style>
</head>
<body>
<div class="container">
<div class="head">
<h1>Welcome to my page!</h1>
</div>
<div class="nav">
<h2>some text</h2>
</div>
<div class="content">
<p>Some text in content</p>
</div>
</div>
</body>
</html>
The white space is caused by the margins on your h1,h2,and p tags, try setting the margins to 0 like
h1,h2,p{
margin:0px;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
background-color: green;
}
.container {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10%;
margin-right: 10%;
}
.head {
background-color: gray;
}
.nav {
background-color: blue;
}
.content {
background-color: lime;
}
</style>
</head>
<body>
<div class="container">
<div class="head">
<h1>Welcome to my page!</h1>
</div>
<div class="nav">
<h2>some text</h2>
</div>
<div class="content">
<p>Some text in content</p>
</div>
</div>
</body>
</html>
The margin on the header tags are rendered outside the containing <div>.
Believe it or not, but this is by design. If anyone cares to elaborate on why CSS works like this I would like to hear it. I've been working as a web-designer for 10+ years and I still make this mistake sometimes because it is so unintuitive to me.
You problem is caused by margin on the h1,h2 and p and not on the divs, therefore all you need to do is remove those margins.
as you can see in this link
h1, h2, p {
margin:0;
}
Related
The top of my page looks like this (blue bit at the top is the bottom of my bookmarks bar):
I have a wrapper div holding two imgs (left, right) and a div. I want these three things to all hug the top of the page and line up. I thought adding display: inline would do it, but that didn't work. Now I'm stumped.
CSS:
body {
margin:0px;
padding:0px;
}
#main{
display: inline;
}
p {
font-family:"Open Sans",sans-serif;
font-size: 14px;
}
#img1{
float:left;
}
#img2{
float:right;
}
.design-img {
/*border:1px red;*/
display: inline;
top:0px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> </meta>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/libs/raphael.min.js"></script>
</head>
<body>
<div id='container'>
<img src='go.jpg'/ id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
<img src='go.jpg'/ id='img2' class='design-img'>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
#main {
display: inline-block;
}
This should do the trick.
Look for the differences between inline and inline-block
Put this css may this help you..
#img1{ width:30%; float:left;}
#img2{ width:30%; float:right;}
h1{ margin:0; width:40%;float:left;}
The problem is that you have #img2 after the main div in the source, which means it starts further down than the first image. Floating it to the right won't make it move up on the page!
One solution is to move the <img> up to the top, near the first <img>, so that the main div comes after.
body {
margin: 0px;
padding: 0px;
}
#main {
display: inline;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
.design-img {
/*border:1px red;*/
display: inline;
top: 0px;
}
<div id='container'>
<img src='https://placehold.it/150x150' id='img2' class='design-img'>
<img src='https://placehold.it/150x150' id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
</div>
No changes to the css.
By the way, you have an error in your source: a stray / in the <img> tag. Under some circumstances, this may cause the error correcting routines to think this is the end of the <img> tag. So remove those.
I want to show two divisions side by side. I have tried a few possible solutions, but they still overlap. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Use float:left; Learn about CSS float Property
.sidebar
{
width:150px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:200px;
background:silver;
color:red;
padding:50px;
float:left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
float:left;
padding:50px;
}
.content
{
width:200px;
background:silver;
color:red;
float:left;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
I think do you mean just display two div in one row is it right so it is just simple add float:left in first div it will solve your issue.
Like :
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Just added main parent to both div and used display:inline-flex to it.
.main{
display:inline-flex;
}
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
<div class="main">
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
adding float:left to both div will fix the issue.
css code:
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
}
html code:
<div>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
and if one of your div is going down then you must adjust your div's width.
Apply a float:left to the widgets
To solve this problem :
You should add this code to .content and to .sidebar
Add float:left...
This should help
http://www.w3schools.com/cssref/pr_class_float.asp..
glad to help you
Since div is a block level element, so it will occupy 100% width of its immediate parent. Because of it, one cannot place them in a horizontal manner without making use of float - a very useful CSS property.
So in your CSS you should add the property as below, to get the desired result:
.sidebar {
float: left;
}
Watch the demo here.
To get more information about float, one can always Google, as it is an ocean of knowledge.
use CSS float Property
float: none|left|right|initial|inherit;
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float: left;
}
.content {
width: 200px;
background: silver;
color: red;
padding: 50px;
float: left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
I need css code for this kind of site:
And with my code I get this:
This is my code of index page:
<html>
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=right_side>
THIS IS RIGHT SIDE
</div>
<div id=footer>
THIS IS FOOTER
</div>
</body>
This is css file:
h1{
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}
#header{
margin : 0px;
position: relative;
width:80%;
background-color: red;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#navigation{
margin : 0px;
width:80%;
background-color:blue;
}
#right_side{
width: 20%;
float: right;
background-color: #green;
}
#footer{
clear: both;
position: relative;
width:80%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: gray;
}
#account{
position: relative;
width: 20%;
float: right;
background-color: #yellow;
}
#content{
width:80%;
float:left;
background-color:#black;
color: white;
}
Please if someone know how to position divs like on my first picture. When I try something I always get strange results. Thanks for help!
Alright, there were a few problems with the way that you wrote your HTML. First, ID tags should always have quotations around the ID name. I would just make a container div, a div for the left, and a div for the right side.
I made a demo that uses floats to control the layout. The divs are contained in a large div that is restricted to 800 pixels.
Here's the demo that I made on JS Bin
HTML:
<body>
<div id="container"> <!-- Make a container to hold everything. Centered in CSS -->
<div id="left-side">
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="content">Content Here</div>
<div id="footer">Footer</div>
</div> <!-- End of the left side div -->
<div id="right-side">
<div id="account">Account</div>
<div id="right_side">Right Side</div>
</div> <!-- End of the right side div -->
</div> <!-- End of the container div -->
</body>
CSS:
*{
font-family:sans-serif;
}
#container{
max-width:800px;
margin: 0 auto;
}
#left-side{
float:left;
width:60%;
}
#right-side{
float:right;
width:37%;
}
#left-side div{
text-align:center;
margin-bottom:10px;
}
#right-side div{
text-align:center;
margin-bottom:10px;
}
#header{
background-color: yellow;
text-align:center;
padding:20px 0px;
}
#navigation{
padding:10px 0px;
border: 1px black solid;
}
#right_side{
background-color: cyan;
padding:50px 0px;
}
#footer{
background-color: gray;
padding:5px 0px;
}
#account{
background-color: green;
padding: 10px 0;
}
#content{
background-color:black;
color: white;
padding:100px 0px;
}
Change HTML as follow because you need container divs:
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div class="left_container">
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=footer>
THIS IS FOOTER
</div>
</div>
<div class="right_container">
<div id=right_side>
THIS IS RIGHT SIDE
</div>
</div>
</body>
in CSS file add also
.left_container{float:left;width:80%;margin:0px}
.right_container{float:left;width:20%;margin:0px}
.clr{clear:both}
Something like this perhaps?, learn about CSS class'es there reusable (incase you might want multiple right side box's and it will shorten the CSS code because you dont need to create a selector for every element.
Copy and paste source - change to suit...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0;
}
#wrapper {
width:800px;
height:100%;
margin:0 auto;
}
#wrap-left {
width:75%;
height:100%;
float:left;
}
#wrap-right {
width:25%;
height:100%;
float:right;
}
#header,#navigation,#footer,.right-small {
height:45px;
margin:10px;
}
#content,.right-tall {
height:230px;
margin:10px;
}
.round-corners {
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
padding:20px;
}
.bg-yellow {
background:#FEF200;
}
.bg-red {
background:#ED1B24;
}
.bg-blueish {
background:#3F47CC;
}
.bg-green {
background:#23B14D;
}
.bg-grey {
background:#C3C3C3;
}
.border {
border:5px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrap-left">
<div id="header" class="bg-red round-corners">
<h1>THIS IS HEADER</h1>
</div>
<div id="navigation" class="bg-blueish round-corners">
THIS IS NAVIGATION
</div>
<div id="content" class="border round-corners">
THIS IS CONTENT
</div>
<div id="footer" class="bg-grey round-corners">
THIS IS FOOTER
</div>
</div>
<div id="wrap-right">
<div class="right-small bg-yellow round-corners">
ACCOUNT
</div>
<div class="right-tall bg-green round-corners">
left side
</div>
</div>
</div>
</body>
</html>
why no use a table
<body>
<table width="100%" cellspacing=5 cellpadding=5 border =0 >
<tr><td bgcolor=red width="80%" height=200px> header </td> <td bgcolor=yellow>account</td> </tr>
<tr><td bgcolor=blue height=100px> navigation </td> <td bgcolor=green rowspan=2>Left side</td> </tr>
<tr><td bgcolor=cyan height=400px> content </td></tr>
<tr><td bgcolor=grey height=100px> footer </td></tr>
</table>
</body>
you don't need css for that..
I'm new to HTML & CSS and one of my first steps is creating a normal layout like
/----------------\
| Header |
|----------------|
| N | |
| a | Content |
| v | |
|----------------|
| Foot |
\----------------/
In order to be flexible, Navs width shouldn't be fixed and the Content should never float around it. In other words, Nav and Content should behave like table columns just that the use of tables for formatting are a big no no in HTML. My current code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Todo list</title>
<style type="text/css">
nav {
float: left;
padding-right: 5px;
margin-right: 5px;
background: yellow;
height: auto; /* auto | inherit | 100% */
width: auto;
}
#content {
margin: 5px;
padding-left: 5px;
}
header {
background: blue;
}
footer {
clear: both;
background: #ccc;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>
</head>
<body>
<header>
Head
</header>
<nav id="main_nav">
<ul>
<li>Home</li>
<li>Contact (p)</li>
<li>Temp</li>
</ul>
</nav>
<div id="content" class="clearfix">
<h1>Test</h1>
<h2>A</h2><h2>C</h2><h2>D</h2>
</div>
<footer>
<p>[Copyright bumf]</p>
</footer>
</body>
</html>
Which results in
Most solutions I found used either a fixed width for Nav or for the Content margin, which isn't a clean. It seems that CSS Multi-column Layout Module or CSS Flexible Box Layout Module could help, but they are both "Candidate Recommendation" so I can't use them safely. What's the proper way to solve my problem?
There were some serious issues with your markup, the body tag should wrap all of the page elements, the basic markup should follow:
<!DOCTYPE html>
<html>
<head>
<!-- meta tags etc -->
</head>
<body>
<!-- page content -->
</body>
</html>
As for the style issue, the #content div just needs floated to the left as well. There are other ways, but this will probably suffice.
<!DOCTYPE html>
<html>
<head>
<title>Todo list</title>
<style type="text/css">
nav {
float: left;
padding-right: 5px;
margin-right: 5px;
background: yellow;
height: auto; /* auto | inherit | 100% */
width: auto;
}
#content {
margin: 5px;
padding-left: 5px;
float: left;
}
header {
background: blue;
}
footer {
clear: both;
background: #ccc;
}
</style>
</head>
<body>
<header>
Head
</header>
<nav id="main_nav">
<ul>
<li>Home</li>
<li>Contact (p)</li>
<li>Temp</li>
</ul>
</nav>
<div id="content">
<h1>Test</h1>
<h2>A</h2><h2>C</h2><h2>D</h2>
</div>
<footer>
<p>[Copyright bumf]</p>
</footer>
</body>
</html>
Nav and Content should behave like table columns
If you meant this literally, you could use the table layout model (as mentioned by Holf).
See this jsFiddle or the following code:
nav {
display: table-cell;
padding-right: 5px;
background: yellow;
white-space: nowrap; /* Prevent nav from ever inserting line breaks between words (like before "(p)"). */
}
#content {
display: table-cell;
padding-left: 5px;
width: 100%; /* Because of table layout, this will shrink nav to the smallest width its content can handle (similarly to how float widths work). */
}
header {
background: blue;
}
#main {
display: table;
width: 100%;
}
footer {
background: #ccc;
}
<header>
Head
</header>
<div id="main">
<nav id="main_nav">
<ul>
<li>Home</li>
<li>Contact (p)</li>
<li>Temp</li>
</ul>
</nav>
<div id="content" class="clearfix">
<h1>Test</h1>
<h2>A</h2><h2>C</h2><h2>D</h2>
</div>
</div>
<footer>
<p>[Copyright bumf]</p>
</footer>
It is now possible in CSS3 to do the equivalent of HTML-based table layouts using pure CSS alone. (see comment).
Pure CSS equivalents for HTML-based table layouts have been in the CSS spec since version 2.1. They are now supported well in most browsers. Here is a good article on this.
Support for IE7 and below is limited.
This is how I would do it:
Example: jsFiddle
HTML:
<div id="header">Header</div>
<div id="main">
<div id="nav">
<div class="wrapper">Nav</div>
</div>
<div id="content">
<div class="wrapper">Content</div>
</div>
</div>
<div id="footer">Footer</div>
CSS:
<style>
html, body{height:100%; margin:0; padding: 0; background:#ccc;}
#header{ background: #0cc; height:50px; position: absolute; width:100%;}
#main, #content, #nav{ width:100%; height:100%;}
#content{ background: #555; width:75%; float:left;}
#nav{ background: transparent; width:25%; float:left;}
.wrapper{padding: 50px 15px;}
#footer{background: #fcc; height: 50px; position: fixed; bottom: 0; width: 100%;}
</style>
Well you need a better understanding of <div> tags and the three positioning schemes - relative, absolute and fixed.
I have taken the liberty of editing your code my style, although it does not include the positioning.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:750px;
margin:0 auto;
background:#99c;
}
#header {
padding:5px 10px;
background:#ddd;
}
h1 {
margin:0;
}
#nav {
padding:5px 10px;
background:grey;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#sidebar {
float:left;
width:230px;
padding:10px;
background:yellow;
height:100%;
}
h2 {
margin:0 0 1em;
}
#main {
float:right;
width:480px;
padding:10px;
background:red;
}
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>header goes here</h1></div>
<div id="nav">
<ul>
<li>Options</li>
</ul>
</div>
<div id="sidebar">
<h2>Siidebar</h2>
<p>Home</p>
<p>Content</p>
<p>Content</p>
<p>Content</p></div>
<div id="main">
<h2>Main Content</h2>
<p>Hello</p>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Check out this page i think it will solve your problem.
http://www.tutorialrepublic.com/html-tutorial/html-layout.php
Something interesting is happening with my HTML code and I was hoping someone could explain what is going on here.
I have a very simple website with a container div, header div, and body div and it looks like the html elements aren't responding at all to the divs(They aren't going in the div they are between in the html markup).
Was wondering why its behaving this way.
Here is the html:
<html>
<head>
<title>Andy</title>
<link rel="stylesheet" href="style-andy.css" type="text/css" media="screen" />
</head>
<body>
<div id='container'>
<div id='header'>
<h1>Andy </h1>
</div>
<div id='image'>
<img src='main.jpg' />
</div>
</div>
</body>
</html>
Here is the CSS:
html, body
{
margin:0;
padding:0;
}
#container
{
width:1024;
margin:0 auto;
}
#header
{
width:1024;
padding-bottom:10px;
border:1px solid black;
}
#header h1
{
float: right;
display: inline;
color: black;
font-family: helvetica, arial;
font-weight: 100;
}
#image
{
width:1024;
height:100;
border:1px dotted yellow;
}
Your HTML looks fine, but your CSS is missing the px measurement on your widths and heights and your h1 tag is being made to float: right; meaning that the header div probably won't have a height (You will need to 'clear' the header div)
Edit:
FYI, a simple way to clear is to just put a div with a class of clear under the content you need to clear, then use the CSS to tell that div to clear, for example:
HTML:
<div id="header">
<h1>Andy</h1>
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
There are other ways of doing this, for example: http://www.webtoolkit.info/css-clearfix.html