I am trying to build a two column header with minimum width of 1024px. I would like the window to cut of the right side of the site when a viewer's screen is smaller than 1024px, but I keep getting weird results, like the left side moving in. Thanks in advance.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
<style type="text/css">
body{
margin:0;
padding:0;
background-image:url(images/bground.jpg);
background-repeat:repeat-x;
}
#contentwrapper{
float: left;
width: 100%;
min-width:1024px;
background-image:url(images/header_middle.jpg);
background-repeat:no-repeat;
background-position:center top;
}
#contentcolumn{
margin-left: 351px; /*Set left margin to LeftColumnWidth*/
background-image:url(images/header_right.png);
background-repeat:no-repeat;
height:318px;
background-position:right;
}
#leftcolumn{
float: left;
width: 351px; /*Width of left column*/
margin-left: -100%;
background-image:url(images/header_left.png);
background-repeat:no-repeat;
height:300px;
}
</style>
</head>
<body>
<div id="contentwrapper">
<div id="contentcolumn"></div>
</div>
<div id="leftcolumn">
</div>
</body>
</html>
Try this
CSS
div.wrapper {
width: 100%;
min-width: 1024px;
}
div.one {
width: 300px;
float: left;
height: 300px;
}
div.two {
height: 300px;
}
HTML
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
Live Example
http://jsfiddle.net/HKrbn/
Related
I have a fixed position element. I want it position on the bottom and to take up 100% of the screen width. It keeps taking the width of it's parent from the center. The blue container starts from the locatino of the red instead of the view port.
<!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>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="width: 800px; background-color: red; height: 1500px; margin: 0 auto; position: relative; z-index: 999">
<div style="background-color: blue; width: 100%; height: 350px; position: fixed; bottom: 0; z-index: 9999">
</div>
</div>
</body>
</html>
I didn't understand exactly what you mean.
But you can located the blue element in abetter way.
.blue{
position:fixed;
height:350px;
/*make 100% width*/
left:0;
right:0;
bottom:0;
}
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).
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/
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>
Im trying to do layout that has header, content and footer. Footer must be bottom of the page(done). But my problem is how can I get content 100% strech between header and footer. When my content is empty, then I can't see that, but when I'm writing some word to html in to content div, like "hello", then the content is only so long than the content in content. I guess you can understand what I mean.
Can somebody explain what is wrong in my css code.
Red is header, green is footer, cyan is content and blue is container. Problem is that Content does not cover the container area.
<!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>Praktika1</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#CHARSET "UTF-8";
*{padding:0; margin:0;}
html,body{
height:100%;
}
#container{
width: 1024px;
position:relative;
background-color:#cce;
margin: 0 auto;
min-height:100%;
}
#header{
width: 1024px;
height:100px;
background-color: #CCC;
}
#content{
height:100%;
width:1024px;
background-color:yellow;
}
#footer{
width: 1024px;
height: 100px;
position:absolute;
bottom:0;
background-color: #ced;
}
You're in luck. I spent a good amount of time yesterday figuring out a question similar to this.
http://andrew.x10.mx/rene/
html -
<div id="container">
<div id="header">
<div id="header-content">
Hai der. I'm a header.
</div>
</div>
<div id="content">
<h1>Content here</h1>
<div id="footer">
<div id="footer-content">
I'm a footer lol
</div>
</div>
</div>
</div>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #0f0;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
#header-content {
padding: 10px;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 1024px;
text-align: left;
margin: 0 auto;
min-height:100%;
}
#content { padding: 20px 10px; }
#footer {
background: #f00;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
text-align: center;
}
#footer-content { padding: 10px; }
Hard to tell without the HTML, but I would try to add a min-height of %100 to #content
One solution would be this:
#content{
background-color:yellow;
position:absolute;
top:100px;
bottom:100px;
width:100%;
}
You could use absolute positioning on all three parts of the page (header, content, footer):
Live demo: http://jsfiddle.net/bBEJ6/
Perhaps a margin-bottom: 0 px could work?
Your question is worded very poorly, but from what I can see you want your content to fill up 100% of your page, yet you have specified a specific width on your #content section by using the width:1024px property.
Try width:100% and see if this solves your problem.