|
CSS - Ie6 And Floats Ruining My Life
Hi. Am making a site and used Matthew James Taylor's perfect two column layout ... it looks exactly how I want it to look on firefox, safari, chrome, and ie7. {http:// mledavis [dot] fastmail [dot] fm /fix-me/site-good.png}
On ie the main content div is smashed up against the menu on the left, and some of it shows up UNDER the menu. The nice border on the right side of the menu is pushed out from the menu (the faux-drop-down sub menu is supposed to be pushed out from the main set, and should be on top of the border as in firefox, chrome, etc). It's ugly. {http:// mledavis [dot] fastmail [dot] fm /fix-me/site-bad.png} I did try making all my overflows: hidden; I did try adding display: inline;, but this changed nothing and I don't think that's the problem. This is a portfolio to help me find a new job, and I need this to look good. Any help would be greatly appreciated. Code below, and links to mock-up duplicates (can't post original for legal reasons as there are student photos). THANKS. CSS: Code:
/* General styles */
body {
padding: 0;
margin: 0;
border: 0;
background: #F6F0E6;
width:100%;
min-width:600px;
font: normal 80% arial, verdana, helvetica, sans-serif;
color: #333
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
background-color: #778899;
border-bottom: 6px solid #fff;
padding: 0;
height: 200px;
background-image: url('log.png');
background-repeat: no-repeat;
text-align: right;
}
#header p {
font-weight: bold;
font-size: 1.3em;
color: #F6F0E6;
margin: 30px;
}
/* column container */
.container {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
/* 2 column left menu settings */
.sidelinks {
padding: 0;
margin: 0;
}
.sidelinks .content {
float:left;
width:200%;
position:relative;
left:196px;
background: #F6F0E6;
}
.sidelinks .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
}
.sidelinks .col1 {
margin:0 15px 0 215px;
position:relative;
right:100%;
overflow: hidden;
}
.sidelinks .col1 .meat {
width: 660px;
margin: 50px auto;
text-align: center;
margin-top: 30px;
background: #F6F0E6;
overflow: visible;
}
.sidelinks .col1 .meat p {
max-width: 600px;
text-align: justify;
line-height: 160%;
margin: 2em auto;
}
.sidelinks .leftcol {
float:left;
width:196px;
position:relative;
right: 200px;
border-right: 4px solid #778899;
}
/* Header styles */
h2 {
text-align: center;
font-size: 1.3em;
border: 1px #778899 solid;
padding: 6px;
background-color: #fff;
margin: 20px -30px;
color: #708090;
overflow: visible;
}
h3 {
text-align: center;
font-size: 2em;
color: #708090;
text-shadow: 2px 2px 0px #fff;
margin: 0 0 30px 0;
border-bottom: 4px #778899 double;
}
h4 {
font-size: 1.2em;
color: #708090;
text-shadow: 1px 1px 0px #fff;
}
h5 {
font-size: 1.1em;
text-align: center;
color: #708090;
padding: 0;
margin: 0;
letter-spacing: 3px;
font-weight: bold;
}
/* Link styles */
.leftcol {
width: 210px;
text-align: right;
padding: 10px 0 0 0;
margin: 0;
height: 100%;
}
.leftcol ul {
margin: 5px 10px 5px 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
}
.leftcol a {
display: block;
padding: 20px 10px;
margin: 10px 0;
width: 176px;
height: 100%;
}
.leftcol a:link, .leftcol a:visited {
color: #708090;
text-decoration: none;
}
.leftcol a#current {
background-color: #778899;
color: #fff;
}
.leftcol a:hover {
background-color: #c1cdc1;
color: #708090;
}
#header a {
color: #F6F0E6;
}
#header a:link, #header:visited {
color: #F6F0E6;
text-decoration: none;
}
#header a:hover, #header:active {
color: #fff;
}
a:link.inline, a:visited.inline {
font-weight: bold;
text-decoration: none;
color: #4a708b;
border: 2px solid transparent;
border-bottom: 1px dotted #4a708b;
padding: 2px;
padding-bottom: 0;
}
a:hover.inline, a:active.inline {
color: #4a708b;
border: 2px solid #4a708b;
background: #fff;
}
/* Image styles */
img.classroomculture {
border: 2px #708090 solid;
margin-bottom: 10px;
text-align: center;
-moz-box-shadow: 3px 3px 4px #778899;
-webkit-box-shadow: 3px 3px 4px #778899;
box-shadow: 3px 3px 4px #778899;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
}
img.teachinghistory {
border: 2px #708090 solid;
float: left;
margin-right: 30px;
margin-bottom: 10px;
-moz-box-shadow: 3px 3px 4px #778899;
-webkit-box-shadow: 3px 3px 4px #778899;
box-shadow: 3px 3px 4px #778899;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#778899');
}
.sidelinks .col1 .meat p.picturecaption {
text-align: center;
color: #000;
font-style: italic;
margin-top: 2em;
padding: 8px;
background: #fff;
border: 1px #708090 solid;
}
/* Footer styles */
p.minifoot {
text-align: center;
margin:0;
padding: 0 0 20px 0;
}
#footer a:link, #footer a:visited, .minifoot a:link, .minifoot a:visited {
font-weight: bold;
text-decoration: none;
padding: 6px 20px 20px 20px;
color: #fff;
background-color: #778899;
border: 3px #c1cdc1 solid;
border-bottom: 0 #c1cdc1 solid;
}
#footer a:hover, #footer a:active, .minifoot a:hover, .minifoot a:active {
color: #708090;
background-color: #c1cdc1;
border: 3px #778899 solid;
border-bottom: 0 #333 solid;
text-decoration: underline;
}
#footer {
clear:both;
float:left;
width:100%;
text-align: center;
margin:0;
padding: 0;
border-top: 3px solid #c1cdc1;
border-bottom: 10px solid #778899;
}
#footer p {
padding:10px 10px 0 10px;
margin:0;
}
.inset a:link, .inset a:visited {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #c1cdcd;
width: 170px;
text-align: center;
border: 1px solid #708090;
font-size: .9em;
}
.inset a:hover, .inset a:active {
background-color: #9fb6cd;
color: #fff;
}
.inset a.here {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #778899;
width: 170px;
text-align: center;
border: 1px solid #708090;
color: #fff;
}
.inset a#special {
color: #708090;
padding: 6px 10px 6px 6px;
margin: 10px;
margin-left: 40px;
background-color: #f4a460;
width: 170px;
text-align: center;
border: 1px solid #708090;
}
.inset a#special:hover, .inset a#special:active, .inset a#hot{
color: #fff;
background: #ee7942;
}
ul.downloads {
line-height: 170%;
text-align: left;
}
.downloads a:link, .downloads a:visited {
color: #708090;
padding: 2px 2px 0 2px;
width: 170px;
text-align: center;
border-bottom: 2px solid #fff;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
}
.downloads a:hover {
background-color: #9fb6cd;
color: #fff;
border-bottom: 2px solid #708090;
font-weight: bold;
text-decoration: underline;
}
HTML: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" media="print" type="text/css" href="portfolioprint.css" />
<link rel="stylesheet" media="screen" type="text/css" href="portfolioscreen.css" />
<style media="screen" type="text/css">
/* <!-- */
/* --> */
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
.col1 {
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<p>
text here
</p>
</div>
<div class="container sidelinks">
<div class="content">
<div class="col1wrap">
<div class="col1">
<!-- Right Column Start -->
<div class="meat">
<h5>Beginning ESL</h5>
<h3>Process Writing: Biographies</h3>
<p style="margin-top: 0px;">text here
</p>
<p style="text-align: center;">
<img class="classroomculture" src="monkeydog.png" height="446" width="500" alt="">
</p>
</div>
<p class="minifoot">
<a href="#header">Race to the Top</a>
</p>
<!-- Right Column End -->
</div>
</div>
<div class="leftcol">
<!-- link list start -->
<ul id="LinkList">
<li><a href="junk-index.html">Teacher for Hire</a></li>
<li><a href="#">My Teaching History</a></li>
<li><a href="#">Classroom as Evidence</a></li>
<li id="active"><a href="#" id="current">Sample Teaching</a></li>
<li class="inset"><a href="#">Evidence of Theme</a></li>
<li class="inset"><a href="#">Simple Definitions</a></li>
<li class="inset"><a href="#" class="here">Process Writing</a></li>
<li class="inset"><a href="#">Reading for Non-Readers</a></li>
<li class="inset"><a href="#">Differentiated Assessment</a></li>
<li class="inset"><a href="#">Regents Prep</a></li>
<li class="inset"><a id="special" href="#">Special Note</a></li>
<li><a href="#">Download Resume</a></li>
<li><a href="#">Other Downloads</a></li>
</ul>
<!-- link list end -->
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
code, screen shots / photos, everything available at http:// mledavis [dot] fastmail [dot] fm /fix-me/ Again, thank you. Similar TutorialsI 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>
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've tested my newly built website in Chrome, Firefox, Opera, Safari and various incarnations of IE. IE 6 and earlier aren't displaying it correctly, all the others are. I'm no CSS (or even HTML) whizz, but I've had a go - I've built my site from patching together parts of various templates and examples, and don't understand enough to get to the botom of what's happening. I'm feeling properly fed up with it. I'd be eternally grateful if someone could take a look and tell me how to fix it. As I'm a new site member I can't post links, so sorry for all the odd URLS. Obviously xxx is www but I'm not allowed to post that. I'm really sorry if I'm breaking rules here, but I'm unsure how else to ask anybody for any help . If I should do something differently then please let me know. My sites he xxx.conkerphotography.co.uk This is what happens to the homepage in IE is he xxx.conkerphotography.co.uk/ie6home.png and what happens to the gallery page is he xxx.conkerphotography.co.uk/ie6gallery.png My CSS for the homepage is he xxx.conkerphotography.co.uk/style2.css and the gallery is here (pretty much the same thing): xxx.conkerphotography.co.uk/style.css Many, many thanks to any genius who can tell me how to mend this. Mark --links aren't working so if you have the patience to put the files defined for page and style sheet below after evaxu dot com this is a challenging problem!-- Hey Guys, I've recently got back into web design by making my girlfriend a professional homepage in dreamweaver and css. So far so good, and pretty simple, however I've been trying to format the CV page but now it's starting to unravel... Basically, each element has had a div box put around it so that these can be arranged and floated to the positions I want. This seems to have worked in theory, however the bottom div (or 2 as they're columns next to each other) overlap the container and remove the whole container's background. I have put this online on /resumecssfail.html and you can use the navigation to see how the container background is supposed to be working as on other pages. The /style.css style sheet can be found and the relevant id's are container, maincontent and those starting with cv at the bottom. All that has been changed for this page really are width, float and some padding. However I have tried to use attributes like clear, positioning, display and various re-sizing and float changing to the last elements - whilst also putting the whole CV in other css boxes etc etc. I have put the code through the WC3 CSS validator which says it's valid to css 2.1. I've trawled through blogs and forum posts but just can't seem to find a solution :\ One thing that does seem to help is removing the last div tag (or putting in another tag and putting a character after it - I'm thinking of using a white ".") but this wouldn't be valid css now would it?! I'm going to use these for now on the official site page, but please use the link above to see my error page that I'd like help with. Thanks! I wish the world would abolish internet explorer, it doesn't seem to understand simple commands like the other browsers! My problem is this: i'm building a template from scratch using dreamweaver (for speed really) and I've positioned a left menu div, a breadcrumbs div and 2 other small divs in a row. my next div is the main content which is told to 'clear right' of the last small div in (which is floated right) so that it appears underneath the breadcrumbs and flush alongside the left menu div. Firefox and Chrome seem to understand this, but IE doesn't! in IE it's appending it onto the line above, thereby not 'clearing right' as it's told. You can see it he #wheretoflyguide .com and my CSS is below: #menu_left { background-color: #9CF; float: left; min-height: 200px; width: 180px; } #breadcrumbs { float: left; height: 16px; width: 485px; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-bottom-style: groove; border-top-color: #CCC; border-right-color: #CCC; border-bottom-color: #CCC; border-left-color: #CCC; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; text-indent: 3px; margin-left: 3px; color: #999; } #rss_date_user1 { height: 16px; width: 145px; float: left; border: thin none #999; margin-left: 2px; margin-top: 1px; } #date_user5 { height: 16px; width: 160px; float: right; text-align: right; margin-right: 3px; } #content_area { min-height: 200px; width: 480px; clear: right; float: left; background-color: #C93; margin-top: 3px; margin-left: 3px; } I also have another problem, and that is I've made a container to wrap everything in but it doesn't seem to want to extend with the contents. I have put body { height :100%; } and #container {min-height :100%} but that didn't give me anything on screen, so I changed it to #container { min-height:768px} which gave me a box that was 768px tall but doesn't extend beyond that when the content goes beyond it. (yes i have everything wrapped inside <div id="container"> </div> PLEASE HELP! 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, 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. 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>
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 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 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? 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? I thought I'd got this CSS stuff figured out but now I'm stuck again. I want the last div on this page to be alongside the one above it, but can I get the b****** thing to go there? No! Link I just want them side-by-side with a nice centered gap between them. Can you help? Thanks, John. Hi Guys, I am having a problem with floats. Here is the code I am using: Code: <!DOCTYPE html> <html> <head> </head> <body> <div style="width:900px; border: 1px black solid; float:left;"> <div style="width:400px; height:100px; border: 1px black solid; float:left; display:inline; background-color:blue;"></div> <div style="width:400px; height:300px; border: 1px black solid; float:left; display:block; background-color:green;"></div> <div style="width:400px; height:100px; border: 1px black solid; float:left;display:inline; background-color:red;"></div> </div> </body> </html> I am trying to get the red box to appear right under the blue box. I don't want to use a 2 column layout. Is this possible? Thanks! Elad I'm having a problem where my submit button isn't floating over to the right inside of the div. It's supposed to be inside of the "test" div, but it's just below it. I thought that if I floated an element it would expand the parent element when necessary. What am I missing? This is just a test snippet I was working with to get this functionality to work correctly. Is there a different way I should be trying to achieve this? I've got a form that I'm floating the labels to the left so they lineup properly with their related input. I then want to float the submit button over to the right of the form, but that's when it jumps outside of the div just below it. Code: html <div id="mainT"> <div id="test"> <h4>Enter New Values and Submit</h4> <label>ID: </label>#URL.system# <input class="submitT" type="Submit" value="Submit"> </div> </div> Code: css
div#mainT{
border:1px solid #CCC;
margin-bottom:25px;
width:600px;
padding:10px;
font-size:10px;
color:#000;
background-color:#EEE;
}
div#mainT input.submitT{
/*margin:0 0 0 15px;*/
float:right;
}
div#mainT label{
width:120px;
float:left;
/*margin:0 0 0 15px;*/
}
div#test{
border:1px solid red;
}
I'm using float:left for my left nav bar, and then clear:both for my footer. Trouble is, I need to use some content boxes that will be using floats and then clears, however, when I use clear:both in my content box, it clears EVERYTHING (meaning it pushes below my navbar, because the navbar is quite long). Is there a workaround or am I using floats/clear wrong? TIA Javashackgirl Hi, I have started developing a new website. I am using all the knowledge I gained from this forum, however I want to improve on my previous design. Basically I have the following Html with CSS. Code: <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
color: #00c;
}
div#wrap{
width: 600px;
margin: 0 auto;
background-color: #ccc;
}
div#top{
width: 550px;
margin: 0 auto;
background-color: #0cc;
border: 1px solid red;
}
div#top div#logo{
width: 150px;
float: left;
}
div#top div#links{
width: 400px;
float: right;
text-align:right;
}
div#top div#links ul{
margin: 0;
padding: 0;
list-style: none;
}
div#top div#links ul li{
float: left;
padding-left:10px;
padding-right:10px;
}
div#top div#links ul li:hover{
color: #c00;
}
div#middle{
width: 520px;
margin: 0 auto;
background-color: #ff0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<div id="logo">
Logo
</div>
<div id="links">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
<div id="middle">
Content
</div>
</div>
</body>
</html>
Now as you can see I have the logo div and links div inside the top div. The logo div is set to float left, while the links div is set to float right. I have also given the top div a border of 1px red. Now in IE7 this is displayed correctly while in FireFox and Opera it is not. I once came with this issue here, and Kravvitz suggested me to use the following hack from this website: http://www.csscreator.com/attributes/containedfloat.php. My question is; Is there another way how to do this without having to introduce that hack? Also I have another question. In reality I am not going to have a border and background in the top section. I have set the width of the logo div to 150px and the width of the links div to 500px. 150px + 400px make up 550px which is the total width of the top div. This means that the content div is placed under the top div and not onto it. I have seen it work on both IE7 and FireFox, but do not know about IE6.0 and Opera!! However is this considered as correct? My third (and final) problem is that I want my list to be aligned right! However it keeps coming to the left! How should I accomplish this with the current CSS I have? Any comments are more then welcome. Thanks and Regards Sim085 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 |
|||||||