|
CSS - Floats And Vertical Margins
Doctype: XHTML Strict.
Platform & browsers: Tested on Windows XP using IE 6.0 (with SP2), Opera 7.54 and FireFox 1.0 HTML: Code:
<div id="wrapper">
<p>Wrapper</p>
<div id="floatRight">
<p>Float Right</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
</div>
<div id="leftHuggerNotFloated">
<p>Hugging Left This is really really long text just to see if the text wraps properly and does not disappear behind the right floated div which is yellow.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
#floatRight and #leftHuggerNotFloated are positioned side-by-side. Note that #floatRight comes first in the source. As you will see later, #leftHuggerNotFloated is not floated at all. The problem occurs only when #floatRight is longer than #leftHuggerNotFloated. The CSS: Code:
/*****************************
Some preliminary CSS to remove the
relavent cross-browser inconsistencies
for convenience.
******************************/
body {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
}
/*****************************
Actual CSS. Background colors are for
convenience. #wrapper is given
height: 1% because IE6.0/Win may
occassionally not display #leftHuggerNotFloated
without first highlighting it.
******************************/
#wrapper {
background: red;
height: 1%;
}
/***********************
Note, #leftHuggerNotFloated is positioned
to the left of #floatRight but is NOT
floated to the left.
*************************/
#leftHuggerNotFloated {
background: blue;
clear: left;
}
#floatRight {
background: yellow;
clear: right;
float: right;
width: 200px;
}
#footer {
background: #cccccc;
clear: both;
/* margin-top: 50px;*/
/* margin-top: 200px;*/
}
Here is how the browsers all display it. No problem. When #footer is given a top margin of 50px, the problems begin. IE and Opera display it the same but FF doesn't appear to show any difference. I'm no expert when it comes to vertical (and collapsing) margins but I'm inclined to go with FF here. I think that #footer's top margin should be with respect to the previous staticly positioned element which is #leftHuggerNotFloated. IE and Opera appear to be taking the floating div as the reference point. Now here is where things get stranger. When I increase #footer's margin to 200px, suddenly IE agrees with FF and takes #leftHuggerNotFloated as the reference point while Opera continues to do it's own thing and measure the top margin from the floating div. So my questions a 1. With a top margin of 50px, am I right to assume that FF is displaying the page correctly? 2. Without changing the order of the HTML, are there any CSS techniques to get the browsers to agree on the reference point for #footer's top margin? (padding seems to achieve a similar effect though, assuming that I don't want to make use of #footer's border or background color in any way). I know a few ways of solving this problem by moving the source code around but right now that's not what I want to do. The reason I'm not floating #leftHuggerNotFloated is because I want the div to stretch to fill whatever horizontal space is available between the left side of the screen and #floatRight. With float, I'll need to specify a horizontal width (which I will not know in advance) otherwise the div will simply be as wide as the content it contains. I even tried messing around with negative margins. I made some progress but all the browsers started showing things differently. Similar TutorialsHi, My current code is designed to have a flexible number of columns depending on the width of the screen. It is just divs with a left and right margin: HTML Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div><img src="1.jpg" alt="Angry face" title="Angry face" /></div> <div><img src="1.jpg" alt="Angry face" title="Angry face" /></div> <div><img src="1.jpg" alt="Angry face" title="Angry face" /></div> <div><img src="1.jpg" alt="Angry face" title="Angry face" /></div> <div><img src="1.jpg" alt="Angry face" title="Angry face" /></div> </body> </html> CSS: Code: div{
width:120px;
height:90px;
float:left;
background:#999999;
margin-left:3%;
margin-right:3%;
margin-bottom:13px;
border-style:solid;
border-width:1px;
border-color:#e2e2e2;
}
The trouble is, the right column isnt spaced correctly to the right side of the browser. Ive included an image to show more accuratly what im hoping to achieve. Can anyone help me with this? Floating an element left, with negative margins cuts off portions of the element in IE6. Looks fine in FF and IE7. Page he URL Removed by poster XHTML: Code: <div class="miniContainer logos"> <h3>Logos</h3> <div> test </div> </div> CSS: Code: .miniContainer h3 {font: bold 11px Arial,Sans-Serif; color: #000000; background-color: #ffffff; margin: -17px 0 0 -3px; padding: 0 5px; float: left;}
.miniContainer {border: 1px solid #EEEEEE; margin: 0; padding: 10px; float: left;}
.logos {width: 125px;}
.features {width: 100px; margin-left: 10px;}
Is there a workaround for this? I understand why it's happening, but can't figure out a hack for it. Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox: http://www . restonheights . com/ However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF. Can anyone recommend an IE hack that would get that feedback div to behave? Hello, i'm have a recurring problem when programming websites and it is the vertical spacing added by IE6 between two images. Here is an example template I am working on. brycecre8iv.com The lines beneath the buttons are getting an extra 10px padding at the top in IE6. Appears in order on FF2. Also for some reason the centering is not working with the main container in IE. this usually works perhaps someone can spot my errors. Thanks for any help. webg Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div. But, these 2 divs have to unordered lists in them. I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths.. Screen shot of how my layout looks. img209.imageshack.us/img209/2913/idear.gif I did not add any clear tags to my css.. which I think might be what's causing the issue. Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns. I didn't do anything with the unordered lists. Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works. Thanks for helping me out! BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer. Thanks again. I have floating items inside of floating items. The problem is I cannot clear my floating items in the middle column because that ruins the other columns. How can I clear floats in the middle column? Do you have any better ideas to make my layout work? I have attached in image of how the layout should work. 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>
<title>Title</title>
<style type="text/css">
#content {
display: block;
margin: 0 5px;
padding: 0 10px;
border-top: 1px solid #0B4867;
}
.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .25%;
display: inline;
background: #ffeeee;
}
.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}
.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}
</style>
</head>
<body>
<div id="content">
<div style="margin: 0px 215px; padding: 0px; border: 0px; display: block;">
<div class="content100">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra malesuada turpis. Sed iaculis justo sed turpis. Nulla malesuada turpis sed nibh. Mauris dui quam, cursus at, sollicitudin a, auctor quis, ligula. Vivamus varius blandit velit. Sed eu nibh. Vestibulum sit amet massa. Maecenas elementum massa ac ligula. In vitae massa ut dui facilisis lacinia. Maecenas tristique pede in elit. Duis ultricies aliquam metus. Mauris neque. Nunc nec lectus eu metus rhoncus imperdiet. Etiam egestas semper nunc. Nunc pretium tincidunt felis.
</div>
<div class="content50">
<h2>Row 1, Column 1</h2>
In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque.
</div>
<div class="content50">
<h2>Row 1, Column 2</h2>
This column is not very high.
</div>
<div class="content100">
Donec sed velit mollis erat consequat ornare. Donec accumsan, sapien a posuere tristique, felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 1</h2>
Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 2</h2>
This column is not as high as the previous one.
</div>
<div class="content33">
<h2>Row 2 Column 3</h2>
</div>
<div class="content100">
Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante.
</div>
</div>
</div>
</body>
</html>
I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. Hi All, I am almost tearing he little hair I have left out! I can't get the div in the middle to clear the floats. Works just lovely in FF, but that IE thing won't work!!! Grrree http://www.tuxdiscs.com/sscp7b/ Any advice would be appreciated! Thanks After fighting with JS to get scrolling content to work, I now have a problem with IE8/9, where a wide div bleeds outside of containing div. Works fine in FF and Chrome code and css are in http://rentz.phi.co.uk/testanimate.html Any ideas? Hello everyone, Newbie here Can anyone show me how to CSS objects or text inline horizontally in the banner/header such as at the top of this forum? My banner/header uses large text for a logo on the left, and I would like to put a search form or something on the right side of the header. Do I have to declare the width of each? See how much newbie I am? Thanks for any help. Ken Hey, k, as per usual, all's well in FF with this site. The list to the right is forcing the paragraphs below in IE tho...I've tried a bunch of different 'clears' and what not, but can't seem to figure it out. Here's the html; Code:
<div id="homelistbox"><b>Upcoming Tradeshows:</b>
<ul class="homelist">
<li><a href="http://www.torontoinwaterboatshow.com">Toronto In-Water
Boat Show,</a> Sept 14-17 2006</li>
<li><a href="http://www.torontoboatshow.com">Toronto International Boat
Show,</a> Jan. 12-21 2007</li>
<li><a href="http://www.sportsmensshows.com/Ottawa/">Ottawa Boat, Sportsman
and Cottage Show,</a> Feb. 22-25 2007</li>
<li>See the various models of Custom Weld Boats at all these shows.
<a href="contact.php">Contact us</a> for more information about locations
at the shows.</li>
</ul>
</div>
<p> Freedom Boat Sales is committed to bringing Canadian recreational enthusiasts
exciting new and pre-owned products for the water, trail, and road.</p>
<p>Flexibility, great pricing, and innovative products will keep you coming
back for all your recreational needs!</p>
<p>Please be advised that we are currently working to improve your online
experience, so your patience is greatly appreciated!</p>
<div class="clear"></div>
and the CSS; Code:
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
line-height:11pt;
color:#555;
text-decoration:none;
width:650px;
margin-top:5px;
padding:10px;
}
#homelistbox {
width:180px;
padding:5px;
margin:2px 10px;
border-top:1px dotted #CCC;
border-left:1px dotted #CCC;
min-height:120px;
float:right;
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
color:#255CB8;
}
.homelist li {
margin-top:5px;
padding-left:10px;
list-style:none;
}
.homelist a {
color:#FF0000;
text-decoration:underline;
}
.homelist a:hover {
color:#255CBE;
text-decoration:none;
}
i'm also having similar issues with simple image floats, as seen here. It forces the paragraph underneath in IE...boourns. Anyways, any guidance'd be greatly appreciated. Cheers. Hello, I'm currently working on a website layout that uses CSS for everything. I have a header, and two columns below that. The header works perfectly. I used float:left on both of my two columns, and they both appear side-by-side as intended. However, I want the right column to fill up the entire right side of the screen. When I try to use CSS's width: 100%; the entire right column jumps down below the left column, which is not what I want. I made a little screenshot: http://img282.echo.cx/img282/6555/tms1od.png I believe it can be done, but I'm stumped. Help is appreciated Hey, yet again I am having issues with some floated elements in IE (6 + 7). Have a look here. The product details start under the bottom of the photo of the product, and I've tried a bunch of different things to get it lined up with no joy. Here's the CSS: Code:
#features {
position:relative;
float:right;
margin:0 20px 20px 20px;
width:350px;
border:1px solid #E1DCC6;
border-top:0;
}
* html #features {
margin:0 10px 0 10px;
}
#features p, #features p strong {
font-size:10px;
margin:4px;
padding:2px;
}
#picbox {
width:350px;
height:350px;
margin:0 20px 0 20px;
float:right;
border:1px solid #E1DCC6;
border-bottom:1px dashed #E1DCC6;
}
* html #picbox {
margin:0 10px 0 10px;
}
#detail-list {
margin:10px 60px;
}
#detail-list li {
list-style:square inside;
margin:2px;
}
#buynow {
margin:5px 10px 5px 30px;
}
#priceTable {
margin:10px 40px;
border:1px solid #E1DCC6;
}
#priceTable td {
padding:4px;
}
#priceTable td.priceRight {
background-color:#E1DCC6;
font-size:14px;
font-weight:bold;
color:red;
}
#priceTable td.priceLeft {
text-align:right;
color:white;
font-weight:bold;
background-color:#B8A488;
}
.liner {
text-decoration:line-through;
}
Any insight, as per usual, is greatly appreciated. This may be a stupid question, but I recently noticed something with floats and side by side elements that confuses me. I thought you always had to specify a width when it came to floating elements along side each other, as block level elements inherit 100% width usually. But on the last 2 sites I coded, I was able to float divs without specifying a fixed width. The div boxes only took up the width of there content. Worked in FF, Chrome, Safari, IE7/8. This is great, as it saves time, but makes no sense. Am I confused? Can you guys tell me why code below does not show properly in firefox 2 when it shows up right in IE7? If I add clear:both to footer then it displays right, but should not it show it alongside the div #2 anyways? Code:
<!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" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">
<head>
<title>Test</title>
<style>
body {
margin:0px;
}
.container {
margin: 0 auto;
height:500px;
width:500px;
border-width:thin;
border-style:dotted;
}
.leftcontent {
float:left;
width:100px;
height:100px;
border-width:thin;
border-style:dotted;
}
.rightcontent {
float:left;
width:100px;
height:100px;
border-width:thin;
border-style:dotted;
}
.footer {
border-style:dotted;
border-width:thin;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="leftcontent">
1
</div>
<div class="rightcontent">
2
</div>
<div class="footer">
3
</div>
</div>
</body>
</html>
I've got two columns set-up using floats. They work fine in Firefox, Opera and Konqueror on my machine, but a friend with Windows informs me that it doesn't work properly in Internet Explorer. The code is as follows: Code:
div.get_content_voc_left {
width: 50%;
float: left;
clear: both;
}
div.get_content_voc_right {
width: 50%;
float: right;
clear: none;
}
The results in IE can be seen in this screenshot and this screenshot. Those with IE can have a look at a live copy of the HTML here and the CSS here. Any help is appreciated |
|||||||