I have the following simple html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#page {
position: relative;
width: 1000px;
min-height: 300px;
margin: 0 auto;
border: 1px solid red;
background-color: green;
}
#allcontent {
position: static;
top: 225px;
margin: 225px auto 0px auto;
width: 850px;
background-color: blue;
}
#content {
border: 1px solid white;
}
</style>
</head>
<body>
<div id="page">
<div id="allcontent">
<div id="content">
<p>This is content</p>
</div>
</div>
</div>
</body>
</html>
It looks exactly like I want it to look like, but if I remove the border from #page it totally screws up the layout. I can't figure out why. I know, I could have a transparent border as a workaround, but it seems odd...
Because you have margin:225px auto 0px auto in your <div id="allcontent"> that pushes the whole content down.
Instead of using margin, use position:absolute/relative to position your element in your <div id="page">.
The margin for #allcontent is pushing it down.
http://jsfiddle.net/2QjYG/
Related
I'm looking deeper into CSS floats and I can't really find a reason for this. (title)
According to MDN,
As mentioned above, when an element is floated,
it is taken out of the normal flow of the document (though still remaining part of it).
It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
So something like this
.container {
width: 800px;
height: 500px;
border: 1px solid red;
}
.left {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 5px 0 0 5px;
float: left;
}
.right {
width: 200px;
height: 200px;
border: 1px solid purple;
margin: 5px 0 0 5px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
is easily understandable.
But why this happens when changing the right box's float property to right?
.container {
width: 800px;
height: 500px;
border: 1px solid red;
}
.left {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 5px 0 0 5px;
float: left;
}
.right {
width: 200px;
height: 200px;
border: 1px solid purple;
margin: 5px 0 0 5px;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
I think this might happen because the first element with float "disappears" from the flow of the page, so it allows other elements to stand on the same line.
Am I right?
Can anybody help me understand this better?
Thanks.
I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer.
Now I have so far done this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
Now if we check the CSS:
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#navbar{
height:100%
// rest of your code
}
Same to your content
call it something like content, because body is already used.
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
EDIT: your full code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
More detail here
...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).
This is the HTML Code
<div class="wrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
The Center Div got a fixed width the left and right div should use the remaining width
The CSS:
.left { float: left; }
.center { width: 500px; float: left; }
.right { float: right; }
What can i do that the left and right div uses the remaining width?
3 column fluid layout with a 500px center column
This is a difficult layout for sure. I found this demo page that emulates it:
http://www.gunlaug.no/tos/moa_27c.html
And was able to reproduce with a fairly small amount of CSS and HTML (you will have to change your markup). Demo: http://jsfiddle.net/jAsMx/
<div id="side1">
<div class="col">
<p>First</p>
</div>
<div>
<p>Second</p>
</div>
</div>
<div id="side2">
<div class="col">
<p>Third</p>
</div>
</div>
#side1 {
width: 50%;
float: left;
margin: 0 -260px 0 0;
background: #fff;
padding: 0 0 10px;
}
#side1 div {
margin: 0 250px 0 0;
min-height: 300px;
background: #dda;
}
#side2 {
width: 50%;
float: right;
margin: 0 0 0 -260px;
background: #fff;
}
#side2 .col {
background: #dda;
margin: 0 0 0 250px;
}
#side1 .col {
background: #fea;
width: 500px;
float: right;
margin: 0 -250px 0 0 ;
position: relative;
}
.col {
/* For backgrounds: This is not an equal height layout yet... */
min-height: 300px;
}
It uses negative margins to compensate for the fixed width of the center column, and 2-1-3 column ordering (which provides a minor SEO boost, as your main content is higher in the page source). While this is not a "ready-for-production" layout, it should get you started.
A:specify width to parent DIV
B:devide suitable width to child DIVs
C:keep in your mind box Model Concept(http://www.w3schools.com/css/css_boxmodel.asp)
look at this:
<!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">
.wrap{
width:950px;
margin:0 auto;
}
.left { float: left; border:1px solid red;height:400px; width:222px; }
.center { width: 500px; float: left; border:1px solid blue;height:400px; }
.right { float: right; border:1px solid green; height:400px; width:222px; }
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
::Second Answer For Comment::
i write a code via Javascript that solve your problem,test this:
<!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">
#wrap{
width:100%;
margin:0 auto;
border:1px solid #FFFF00;
}
#left { float: left; border:1px solid red;height:400px; width:222px; }
#center { width: 500px; float: left; border:1px solid blue;height:400px; }
#right { float: right; border:1px solid green; height:400px; width:222px; }
</style>
</head>
<body>
<div id="wrap">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
</html>
<script type="text/javascript">
document.getElementById('center').style.width = '500px';
var wrapWidth = (document.getElementById('wrap').style.width =
window.innerWidth+'px').split('px');
var centerWidth =(document.getElementById('center').style.width).split('px');
var rightLeft =((wrapWidth[0] - centerWidth[0])-6)/2;
document.getElementById('right').style.width
=document.getElementById('left').style.width = rightLeft+'px' ;
</script>
this code work fine with FF and Chrome, but with IE not.
How fix this code with IE (9,8,7)?
<html>
<head>
<style type='text/css'>
.center{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
</body>
The reason it's not working in IE9/8 is because you are missing your DOCTYPE. It still won't work in IE7, but if you make your span display block and adjust your margins, you can get it to look the same. See my example:
<!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>
<style type='text/css'>
.center{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
</style>
<!--[if IE 7]>
<style type='text/css'>
.sub {
display: block;
margin: 70px auto;
</style>
<![endif]-->
</head>
<body>
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
</body>
vertical-align: middle to the div will not vertically center its contents. It will attempt to align the paragraph with the previous and following elements. Since the div is a block level element (and, so are the surrounding elements), vertical-align: middle will have no effect at all.
you can use line height to center its content.
use this
body { padding: 0; margin: 0px;}
.Center { margin: 0 auto;}
it is welcome everywhere
what is the proper code for this?
in div style code. I know how to use float but only 2 divides. But in 4 divides, I don't know.
Just float them all left and if necessary add a right margin of -1px so that the borders overlap nicely. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</body>
</html>
Floating will still work for any number of div's, they'll line up next to each other until they fill the width of the container, at which point they will start to wrap to the next line.
Just add float: left for every div.
Also, if you don't want your 4 divs to wrap to the next line when the window gets resized you can place your 4 divs inside a parent div and set the width of that parent div.
Here is an example based on BalusC's code above:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
.parent {
width: 404px;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
</body>
</html>