I am trying to create a web page using CSS (Table less) but my main content area is not extending with contents please check my html and css codes and give me a solutions, Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>::Model::</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Css code
body{
margin:0px;
padding:0px;
height:auto;
}
#wrapper{
margin:0px auto;
width:1000px;
}
#header{
height:50px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#main{
height:auto;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#footer{
height:100px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#left{
border:#CCCCCC solid 1px;
width:640px;
padding:4px;
float:left;
margin-right:2px;
}
#right{
float:right;
padding:4px;
border:#CCCCCC solid 1px;
width:320px;
}
Thanks again
Just apply overflow:auto; on #main to make it wrap its floating children.
Take a look on Floating image to the left changes container div's height
(You can remove its height rule)
You have floated elements in your document, which as the name suggests means they float above your 'main' div. Hence it isnt extending.
Easy to fix however, you just need to stick a 'clear' in.
your html should look like this, notice the extra div.
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clearme"></div>
</div>
And simply add the following to your css.
.clearme{clear:both}
More can be found on the clear property and its usage here: http://www.tutorialhero.com/tutorial-64-css_clear_property.php
Related
I'm trying to make a site that scales properly based on browser size. I'm aware that usually requires to keep all width and heights set to 100%, however I have no clue how to set it when there's a minimum-height and minimum height for the header and footer. A school logo will be in the header which is unreadable when too small, and a google calendar in the sidebar.
What I'd like to do is set it up so that the header and subheader (dark blue and dark grey bars) are set to be a fixed position. The sidebar (black bar) set to fixed, as well as the footer (light grey). The content section (white box) I'd like to be the only scrollable section that contains all of the news and updates. No matter how I set it up something is always moving inappropriately.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
and the css
#header-container{
width:100%;
height:96px;
position:relative;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:100%;
position:relative;
padding-bottom:55px;
background-color:pink;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
add z-index:10 to #header-container....and all your problems will be solved!!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<style>
#header-container{
width:100%;
height:96px;
position:relative;
z-index: 10;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:1021px;
position:relative;
padding-bottom:55px;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
border: 10px solid red;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
I don't think you need all the position: relative; stuff in there if you're using floats. Another thing you can do is add "overflow: auto" to the content div and do "overflow: hidden" on the others. Have you looked into bootstrap. This is very easy if you're using bootstrap. Check out: http://getbootstrap.com/ , it makes this type of stuff very very easy.
I'm just trying to make my website layout. Now I have a problem: right navigation div stays under the Left navigation one. The blue one should be in the same line as the green.
Any suggestions?
I was following this tutorial: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/ and done the same, but it doesn't work as it should be.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -->
<html>
<head>
<!-- Svetaines dizainas -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="topmenu">TOPMENU</div>
<div id="topheader">TOP HEADER</div>
<div id="lnav">Left Navigation<div>
<div id="rnav">Right Navigation</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
CSS:
body, h1
{
margin:0;
padding:0;
}
#container
{
width:1024px;
margin:auto;
}
#topmenu
{
width: 1024px;
background-color:red;
height:53px;
}
#topheader
{
width:1024px;
height:170px;
background-color:orange;
}
#lnav
{
width:1024px;
background-color:green;
}
#rnav
{
width:373px;
float:right;
background-color:blue;
}
#footer
{
width:1024px;
height:190px;
background-color:pink;
}
#lnav
{
width:1024px;
background-color:green;
}
This shouldn't be 1024 right?
Change it to 651px (from my head) to make it fit.
You could ofcourse put it inside the leftmenu and float it right aswell, (make sure the html of right would be above the content of left). But I wouldn't recommend this.
Arghh my own silly mistake:
<div id="lnav">Left Navigation<div>
I think you can understand what's wrong :D
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
Why the footer element exceeds the height of its parent wrapper when it should have been a fraction of the height of its parent wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slicing</title>
<style type="text/css">
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
div#wrapper{
margin:0px;
padding:0px;
width:100%;
height:100%;
line-height:normal;
border:#C00 thick groove;
background-color:#FF3;
}
div#wrapper div#header{
width:100%;
height:30%;
border:#F00 medium double;
}
div#wrapper div#body{
width:100%;
height:50%;
border:#F00 medium double;
}
div#wrapper div#footer{
width:100%;
height:20%;
border:#F00 medium double;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="hlogo">
</div>
<div id="hdesign">
</div>
<div id="hTestimonial">
</div>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Your borders are combining together to make it too high.
borders are not considered part of height. See the box model.
Each of your borders is around 3px, and it's on both the top and bottom, so that's 6px.
You have the same border on three relevant elements, so that's where the ~18px of "extra height" is coming from.
Your page: http://jsbin.com/epodu5
Exact same but with borders removed and different background-colors: http://jsbin.com/epodu5/2
If you only care about modern browsers (http://caniuse.com/#search=box-sizing), the easiest way to fix it is to use CSS3's box-sizing: border-box:
Like this: http://jsbin.com/epodu5/3
border-box
The width and height properties include the padding and border, but
not the margin.
Use overflow:hidden for parent
I have a main container div in the center of my webpage. This is already in place and has various elements in it.
However, now I'm trying to place a large content div (Div #1) on the left that takes about 70% of the Main Container Div. What I'm having difficulty doing is getting the CSS right for having Div's #1, #2, #3, and #4 arranged like the following image:
What should I do in this case for CSS concerning Div #1 - #4? Should I float Div #1 left, and set it as a percentage/fixed width? And float divs #2 - 4 right?
Some guidance with this would be appreciated!
I'd say 2 wrappers div "left" and "right" floating left with correct sizes.
Put div 1 in left
Put div 2, 3 and 4 in right.
This should work, if not let me know
Here is a working example, that might help you:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
padding:10px;
margin-top:50px;
width:770px;
margin-left:auto;
margin-right:auto;
border:1px solid black;
}
.content h1{
text-align:center;
}
.content h2{
text-align:center;
}
.content .left{
width:600px;
float:left;
border:1px solid black;
}
.content .right{
width:150px;
float:right;
}
.content .right div{
margin-bottom:10px;
border:1px solid black;
}
.content .clear{
clear:both;
}
</style>
<body>
<div class="content">
<h1>Main Container Div</h1>
<div class="left">
<h2>Div #1</h2>
</div>
<div class="right">
<div><p>Div #2</p></div>
<div><p>Div #3</p></div>
<div><p>Div #4</p></div>
<div><p>Div #5</p></div>
</div>
<div class="clear"> </div>
</div>
</body>
</html>