<!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.
Related
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!
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>
I want the background image of one of my divs to overflow into the body section. I've tried overflow:visible without any luck.
Check the pic:
See how the gold bits get cut off on the edge of the div? Suggestions please?
Here's my set up:
in the HTML:
<body>
<div id="container">
in the CSS:
body{
background-color: #0e0a04;
}
#container{
max-width: 960px;
margin: 0px auto;
padding: 0px;
margin-top:60px;
background-color: #0e0a04;
background-image: url(/bundles/tabredirector/images/background-image.png);
background-repeat:no-repeat;
background-position: -70px -20px; /*x,y*/
overflow:visible;
}
Thanks!
WHAT I ENDED UP IMPLEMENTING:
Thanks for all of your suggestions, they inspired my solution. My final solution was to use a master div (position:relative with z-index:-1) and my container (position:absolute z-index:1) and stick an image in the master div that can be positioned absolutely. This way the content always sits on top and the background isn't clipped.
first post your markup and css. Also give the div a width:100%.
You need to make sure there is a div outside your containing div. You can have a container above and below it which will hold all your other content.
Then you need to have a 100% width div with the full bg image centered.
Then within that div add another div for your content which can be 960 wide with an auto left and right margin to center it to the page.
Paste your HTML in your post as well the css is not enough as you need to add to your html!
Thanks
Background images on an element only appear within that element.
If you want your <div>’s background image to appear outside the boundaries of the <div>, you need to assign the background image to another element instead, e.g. the <body> element.
Heres a quick 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#fullWidthImage {
background-color: #0F9;
height: 200px;
width: 100%;
}
#centeredContent {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 200px;
background-color: #09C;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<p>top site content </p>
<p> </p>
</div><!--container-->
<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->
<div class="container">
<p> </p>
<p> </p>
<p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
So I am experimenting with pure css layouts, and immediately I have become stuck. I have the following html and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout</title>
<link type="text/css" href="site.css" rel="stylesheet" >
</head>
<body>
<div id="header">
My Site
<div id="search-area">
<form>
<input type="text" id="search-box" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<div id="sidebar">
Account Name <br>
Edit My Account
</div>
</body>
</html>
#header {
background-color: #151B54;
height: 30px;
width: 100%;
}
#logo {
position: relative;
left: 10px;
color: white;
font-size: x-large;
font-weight: bold;
text-decoration: none;
float: left;
margin-top: 3px;
}
#search-area {
position: absolute;
left: 200px;
margin-top: 3px;
}
#sidebar {
float: left;
width: 100px;
border-right: double;
}
When I view this in Chrome I get the rendering that I was expecting:
However, in IE I get the following:
Notice how there is a massive blank area to the left of the sidebar. Why is that showing in IE?
I get the same problem in Safari and for the same reason: you're not clearing your floats in #header and #header isn't quite tall enough to contain all of its floated children.
If you increase the height of the header to 31px, you should (but maybe not) get the desired layout. A better approach is you add overflow: hidden as a clear fix, that will make all of the children of #header fully contained with #header and that will stop them from interfering with the layout of the next piece:
#header {
background-color: #151B54;
height: 30px;
width: 100%;
overflow: hidden;
}
Live example: http://jsfiddle.net/ambiguous/EUmyN/
A rule of thumb with floated elements is to always make sure they're cleared either with overflow: hidden on their container or, if necessary, with an explicit <div style="clear: both;"></div> at the bottom of the container.
Also, while we're here, you rarely need width: 100% on a block element such as a <div>. If you're positioning it or floating then maybe you'll need something like that but not for a plain <div>; block elements are full width by default.
Try clearing your online cache. Oftentimes the css file is cached and using an older version causing this type of behavior.
May not be the problem, but the first action you should take when trying to troubleshoot unexpected results on style.
I am trying to get an image to stretch out a div element in my new Tumblr blog theme.
Currently my photo div is sizing to the full width of its parent container. The problem I have is that I also have a captions div below the photo and if the photo is not the full width of its containing div I dont want the captions to spill past the edges of the photo.
The Problem !
This is what I am after:
alt text http://dl.getdropbox.com/u/973862/problem.jpg
Here is a drawing !
Here is my code:
<!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">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Brant Winter">
<!-- Date: 2009-04-26 -->
</head>
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div class="container">
<div class="photo">
<img src="http://8.media.tumblr.com/mFYIJY2I7mpit79h73TC9xa7o1_400.jpg">
<div class="caption">Sausage dog airtime</div>
</div>
</div>
</body>
</html>
And this is what it looks like in my browser:
alt text http://dl.getdropbox.com/u/973862/Picture%202.png
This is what it looks like
The container div should be centered, the image should be centered within that and the caption text should not be allowed to go past the edges of the photo ( if there was enough text to do so )
Not sure if I am making any sense, but any help would be appreciated - I have spent hours on this today !!!
You mean like centering the photo?
.photo {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
text-align:center; <---
}
I think the easiest solution would just to be to fix the width of the container. Why is it 520px?
If it has to be 520px, though, then just center the stuff in the container and add auto-margins for the caption:
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
.caption {
max-width: 333px;
margin-left: auto;
margin-right: auto;
}
</style>
The max-width property, in particular, will prevent the caption from spilling past the edges of the photo.
If you don't mind using jQuery to resize it, you could try something like this:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".container").css("width", $(".photo img").css("width"));
});
</script>
That finds the width of the image inside the div (note the space between ".photo" and "img") with class "photo" and applies that width to the div with class "container". Just to be safe, you'll probably want to use IDs if possible, but this will work as long as the class names are unique.