Can anyone explain to me this code because it seems to beat my logic?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
}
#colWr{
width:100%;
height:500px;
float:left;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
margin-left: -100%;
}
</style>
</head>
<body>
<center>
<div id="main">
<div id="colWr">
<div id="col"></div>
</div>
<div id="left"></div>
</div>
</center>
</body>
</html>
My questions rely on the facts that #left holds a margin-left: -100px attribute, the position of the div's within the main div suggest that the left column would rather be a right column and why is the "col" column floated to the left within the "colWr" div?
For a 1_fixed-1_liquid css layout, the code is quite a mind-twister.
The order of the divs doesn't matter as colWr has a width of 100% which means anything floated after it will appear on a new line anyway, if the left column came first it would force the colWr column on to a new line and it would have to be given a negative margin. The left div has a negative margin of 100% which brings it back on top of colWr.
As to why the page was laid out this way I have no idea, the same effect could be just as easily achieved by putting the left next to the col div and removing the colWr div (doesn't do any harm but it serves no purpose).
You should also note that the center tag in HTML has been deprecated and I recommend you give centre a div by specifying in it's css margin: auto. The code also lacks a DOCTYPE declaration which is required to trigger standards mode in most browsers - you can find more information about browser modes here.
My suspicion is that the code you have was written pre-dating the release of HTML 4.01. It will work in most browsers due to their legacy support but that doesn't mean it works well, I wouldn't use it. I would however use this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
margin: auto;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="col"></div>
</div>
</body>
</html>
Related
I'am using bootstrap to create a page layout. My footer bound to the page bottom as described here. This works fine.
But when I'am place a footer inside of container with relative position, I can't to bound footer to the page bottom. Here is example
html,
body{
height:100%;
margin:0;
padding:0;
}
.container{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
header{
height:120px;
background-color:#eee;
}
.middle{
background-color:#aaa;
}
footer{
height:120px;
background-color:#888;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="container">
<header>
Header
</header>
<div class="middle">
Middle
</div>
<footer>
Footer
</footer>
</div>
</body>
</html>
Is it possible to do it with only CSS?
you need to add this css code to the footer
footer{
position: absolute;
bottom: 0;
width: 100%;
}
this will position the footer at the bottom of the first parent with a relative position which is in this case the container div
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the 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 {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#content {
margin-top: 100px;
margin-bottom: 100px;
}
.left { float: left; }
.middle { margin-left:511px; float: none; }
.right { float: right; width: 115px; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>css test</title>
</head>
<body>
<div class="top">I have a dream</div>
<div id="content">
<div class="left">I am left</div>
<div class="middle">I am middle</div>
<div class="right">I am right</div>
</div>
<div id="footer"> I am in the footer</div>
</body>
</html>
Above is my html source code.
It displayed in the browser like below.
My question is why "I am right" is below of "I am middle". I think they should have the same height. How can I improve my css style. Thanks.
Here is the your corrected Fiddle link. Following is your corrected CSS
.middle { margin-left:511px; float: left; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding:15px 15px 15px 0;
}
Add float: left; to your .middle class instead of float:none;
div is a block element and i.e. its takes the full width, for making it to work as you mentioned add float:left; to the middle class.
Output -
Try using display: inline-block to your class="left, middle, right".
Problems With float
The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it.
Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.
To learn more about inline-block refer Robert's Page.
JSFiddle for reference.
I'm pulling my hair out here. I just want two divs side by side containing content that resizes the divs and their containing divs based on the content with all content visible, no scroll.
The following markup isn't my site but I have written it to demonstrate what I want:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style>
#outer{
width:400px;
}
#innerleft{
width:200px;
float:left;
}
#innerright{
width:200px;
color:#900;
float:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerleft">
sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj
</div>
<div id="innerright">
dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv
</div>
</div>
</body>
</html>
I seem to have tried everything!
Apply word-wrap:
#outer > div
{
word-wrap: break-word;
}
http://jsfiddle.net/NEbj7/1/
To make it automatically resize you want to add more -- % percentage to make it automatically fill the space
#outer{
width:100%; /* 100% */
}
#innerleft{
width:50%; /* 50% */
float:left;
word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}
#innerright{
width:50%; /* 50% */
color:#900;
float:left;
word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}
http://jsfiddle.net/eZpvr/1/
Browsers by default won't wrap the text which doesn't have any white space in it. To force the browser to wrap the text you must add the word-wrap property to #innerleft and #innerright
#innerleft, #innerright{
word-wrap: break-word;
}
reference: http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
I would like to have the following layout
+++++++++++++++++++++++
+Header +
+++++++++++++++++++++++
+Nav+ +
+ + +
+ + +
+ + Content +
+ + +
+++++++++++++++++++++++
so basically a two column layout with a header. I've checked many CSS layout generators on the net, but they just produced me a result where the left navbar is as big as the content in it. I can scale it with "height:500px" or whatever, but i want it to be fullsize (from top to bottom of browser window) all the time. Changing the value with "height:100%" does not work.
If you want to try it out yourself: http://guidefordesign.com/css_generator.php and then select full page, two column layout, with header to see what i mean. If you want you can tell me which property i have to adjust in the generated css file to make it work
You can try this. It works on the browsers I tested (Firefox, IE7+8, Opera, Safari, Chrome). Just play around with the percentage units for header and columns.
<!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>for stackoverflow</title>
<style>
body, html {
padding : 0px;
margin : 0px;
height : 100%;
}
#wrapper {
width:900px;
height:100%;
margin: 0px;
padding: 0px;
}
#header {
height:10%;
background-color:#930;
width:900px;
}
#nav {
background-color:#999;
width:200px;
height:90%;
float:left;
}
#content {
height:90%;
background-color:#363;
width:700px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
</div>
</body>
You might want to have a look at and get the idea from:
Super Simple Two Column Layout
See the demo here.
A little general answer: Look into CSS frameworks, like http://www.blueprintcss.org/ - these let you define grids.
Here's a sample page: http://www.blueprintcss.org/tests/parts/sample.html
Concerning the height problem, try out this (should give you 100% of browser window height for your div all the time):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
padding: 0px;
}
.Container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #123456;
color: black;
}
</style>
</head>
<body>
<div class="Container">
</div>
</body>
</html>
A solution you can try, is to give the content area a background image which is repeated vertically (1px height and width of your page). The left side of that image would have the nav background color, and the rest would be the color of the content background color ...