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
Related
If you have two child divs in the parent div, and one of the child divs occupies the width of a particular value, i want to find a css that the other child div automatically occupy the rest of the horizontal dimension.
* {
margin:0;
padding:0;
}
a {
text-decoration:none;
}
li {
list-style:none;
}
img {
height:100%;
border:0;
}
body,html {
width:100%;
height:100%;
}
body {
background-color:#161716;
padding:2%;
box-sizing:border-box;
}
#container {
width:100%;
height:100%;
background-color:aquamarine;
display:flex;
flex-flow:row wrap;
align-items:center;
justify-content:space-between;
}
#scroll {
width:2%;
height:20%;
margin-right:1%;
background-color:burlywood;
}
#container_in {
width: calc(100% - 26%);
height:100%;
margin-left:1%;
margin-right:1%;
background-color:deepskyblue;
}
#side {
width:20%;
height:100%;
margin-left:1%;
background-color:bisque;
}
#header {
width:100%;
height:15%;
}
header {
display:table;
width:100%;
height:100%;
background-color:darkviolet;
}
#logo {
width:fit-content;
height:100%;
background-color:azure;
}
#logo a {
width:fit-content;
height:100%;
}
#navi {
display:table-cell;
width:auto;
height:100%;
background-color:navajowhite;
}
<!doctype html>
<html>
<head>
<title>Untitled</title>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="scroll">
</div> <!-- scroll end -->
<div id="container_in">
<div id="header">
<header>
<div id="logo">
<a href="#">
<img src="img/logo.jpg">
</a>
</div> <!-- logo end -->
<div id="navi">
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div> <!-- navi end -->
</header>
</div> <!-- header end -->
</div> <!-- container_in end -->
<div id="side">
</div> <!-- side end -->
</div> <!-- container end -->
</body>
</html>
Once the entire structure is like the code above.
My question is the div#header section.
The div#header header is a child element of the div#header.
The div#header header contains two child div.
The parent area(div#header header) contains #logo and #navi.
The width of the #logo area is given as width: fit-content; to match the image size of the #logo child area.
Then the other child #navi can not use the same method as width: calc (100% - 10px) without knowing the width value of the #logo child.
I would like to use css only so that the rest of the #logo area in the div # header header area is automatically occupied by #navi.
Make it simple with flex property
add flex:1 to the div you want to give all the remaining space
#container_in{
flex:1;
}
Minimal coded working snippet here:
#container{
display: flex;
align-items: center;
text-align: center;
}
#container div{
padding: 5px 10px;
}
#container_in{
flex:1;
background: blue;
}
#scroll{
background: red;
}
#side{
background: green;
}
<div id="container">
<div id="scroll">scroll</div>
<div id="container_in">It will occupy remaining space</div>
<div id="side"> side</div>
</div>
Working Demo here
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;
}
I made a header with a nav inside of it and set the width to 100%. I kept it out of the container so only the header can take the entire page and the other content will be 960px. Now my site title and nav are too much to the left and i tried to center it and match the 960px container with margin:0 auto but that didn't work. How can i get my site title to match right where the 960px container starts and the nav as well? I want to space the nav more to the right.
jsfiddle - http://jsfiddle.net/wphkyhw8/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="main_header">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="container">
<section class="main_content">
<article>
first article
first article
first article
first article
first article
first article
</article>
</section>
<footer>
copyright 2014
</footer>
</div> <!-- end of container -->
</body>
</html>
*{
margin:0;
padding:0;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
border:1px solid black;
margin:0 auto;
}
.main_title{
float:left;
padding:20px;
font-size:25px;
}
.main_header{
background-color:#000000;
color:#ffffff;
width:100%;
height:80px;
}
.main_nav{
float:left;
}
.main_nav ul li{
float:left;
padding:30px 10px;
}
.main_nav ul li a{
text-decoration:none;
color:#ffffff;
}
You could simply achieve that by wrapping the content of the header by an additional div having a class of .container
Example Here
<header class="main_header">
<div class="container">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<!-- Navigation -->
</nav>
</div>
</header>
It is better to use another class name to apply the border to the content container.
.container {
width:960px; margin:0 auto; /* Removed the border from this selector */
}
<div class="container border"> <!-- Content --> <div>
.border { border:1px solid black; /* Added here */ }
Is this what you're trying to do:
http://jsfiddle.net/wphkyhw8/4/
.main_header{
background-color:#000000;
color:#ffffff;
width:960px;
height:80px;
margin: 0 auto;
}
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..
Inside my div 'container' there appears to be a larger margin on the left side (larger indent) then there is on the right side. Anyone know why I'm getting this behavior? I have removed the ordered list items so there isn't excessive code to view. That shouldn't impact the question I have regarding the code documented below.
<html>
<head>
<title> Fantastic Hardware/Software Computer Package</title>
<style type="text/css">
body {
text-align:center;
}
ul li{
list-style:none;
}
#right{
float:right;
width: 400px;
}
#left {
float:left;
width: 400px;
}
#container {
align: center;
width: 1024px;
border-width:3px;
border-style:solid;
border-color:#00;
padding:50px;
margin:50px auto;
}
</style>
</head>
<body>
<h1 align="center">Custom Hardware/Software System</h1>
<div id="container">
<div id="left">
<ul>
<li></li>
</ul>
</div>
<div id="right">
<ul>
<li></li>
</ul>
</div>
</div>
</body>
</html>
As you can see in the picture, there is more space on the left than right.
Try this:
Use the below code in your CSS:
*
{
margin:0px;
padding:0px;
}
Hope this solves the problem..!
I create fiddle for your question please have a look on it.
`http://jsfiddle.net/8TS9a/`