|
CSS - Problem With Floated <div>
Hello,
I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one. My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content. I placed: Code: <br style="clear: both;"> after the content <div> which usually does the trick but it's not working for some reason... And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus. This happens in IE only. Any ideas? Page html/css: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
background-color: #f9dcb3;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#cRightPaneBot {
background-color: #D9E0EA;
border: 1px solid #9DA7B5;
margin: 23px 0px 0px 0px;
padding: 15px 10px 15px 15px;
/*
width: 673px;
height: 238px;
*/
}
.cLeftPane {
margin: 0px 20px 0px 0px;
border: 1px solid #9DA7B5;
overflow: hidden;
float: left;
background-color: #F5F7FB;
height: 223px;
/*
*/
}
h1 {
font-size: 1.5em;
/*
display: inline;
*/
}
.breakAfter {
margin: 0px 0px 10px 0px;
}
</style>
</head>
<body>
<div id="cRightPaneBot">
<h1 class="breakAfter">My Title</h1>
<div class="cLeftPane" style="width: 200px;">
hello
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna.
</div><br style="clear: both;">
</div>
</body>
</html>
Similar TutorialsI have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would. Here is the basic code I have so far: Code: <html>
<head>
<style type="text/css">
div.box1 {
border: 1px solid red;
background: #afafaf;
padding: 2px;
float: left;
}
div.box1 table {
float: left;
border: 1px solid blue;
margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
<table>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
</table>
<table>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<h1>Next Text</h1>
</body>
</html>
I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code: div.box1:after {
content: 'clear me';
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables? hello, this is my first post so apologies if i give too much information, but rather than miss something crucial, i thought it best to cover all my bases. i am new to CSS and have been trying to reproduce a design that i created as an image, in CSS for a website layout. i have managed the 'bones' of the website but am having difficulty when i get to the actual content. not being the most technical when it comes to CSS terminology, i have uploaded an image which shows what i want it to look like here a cut down version of the page, including just the area in question is available here XHTML css i validated my xhtml, but the css came up with warnings but didn't say it was invalid. i hope this is OK? in firefox it looks fine, but in IE 6, you can see that the photo of the product is not flush to the left of the bordered div. i'm not sure if i have gone about it the wrong way or if it is IE. a friend suggested that rather than have the 2 divs overlapping, i should just use a background image to create the effect, but being stubborn, i would like to try to fix this way, just for experience. would anyone mind having a look? hopefully i have provided enough info, but apologies if not. just ask and i will do my best to explain. thank you for your time J Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it. here is the screenshot of before and after the user clicks the arrow icon: Here is the HTML that I am using to place it: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a></li>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</ol>
I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</li>
</ol>
Here is the CSS I am using to position the above <div> (which is invisible at first): Code: .control
{
float: right;
border: 0px solid #000000;
border-left: 1px dotted #cccccc;
padding: 0px;
padding-left: 8px;
margin: 0px;
margin-left: 8px;
background-repeat: no-repeat;
background-position: 100% 50%;
text-decoration: none;
}
.controlgroup
{
display: none;
/* position: relative; */
/* left: 70em; */
border: 1px solid #fddc9a;
background-color: #fff3ce;
float: right;
}
.controlgroup a
{
padding: 4px 4px 4px 24px;
background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
background-repeat: no-repeat;
background-position: 4px 50%;
}
I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left. It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know? Thanks I really hope somebody can help me out with this one. It might require some yucky hack, but I hope there's a good way to achieve it with regular css. I got a header (140px height), main container and a footer. The main container consists of three areas (from left to right): - a fixed sized column with some illustration (48px) - main contents column, (all available space) - a fixed sized column with newsfacts and such (301px) I've got an absolutely positioned div-element with an unordered list inside. The list-items got no bullets and are float: right, so the end result is a horizontal box. Each item is a link. I want this div-element to be positioned at the top of the middle contents column with the unordered list bar right-aligned. For this I tried using a right-margin: 302px. Also, each list-item is divided by a slim stripe/bar by giving the each li-element a left border. AND... the whole div-element got a bottom border which stretches as wide as the contents column is. Here's a screenshot fragment in Firefox, the only browser in which I got it to work: http://www.stack.nl/~rem/linksbox.jpg I've got the following code: 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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="/screen_abs.css" media="screen" type="text/css" title="regular" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welkomstpagina</title>
</head>
<body>
<div id="startpageLinksBox">
<div id="links">links</div>
<!-- <ul>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
</ul>
-->
</div>
</body>
</html>
with the following CSS file. Code: body {
margin: 0;
width: 100%;
background: url("../../images/common/bg_news.gif") repeat-y top right;
}
div#links {
display: inline;
height: 20px;
border: solid 1px #000000;
float: right;
width: 200px;
margin-left: 48px;
margin-right: 0px;
}
div#startpageLinksBox {
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #e0e0e0;
height: 20px;
position: absolute;
left: 48px;
top: 140px;
margin-right: 302px;
}
div#startpageLinksBox ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
border: solid 1px #000000;
height: 20px;
}
div#startpageLinksBox ul li {
float: right;
border: solid 1px #e0e0e0;
padding: 0px 5px;
}
a { font-family: Arial,sans-serif; font-size: 10px; color: #b0b0b0; }
Important note... since I was on the verge of screaming, I replaced the Unordered list temporarily with a div tag of class=links, to simplify things in a feeble attempt to isolate the problem. It shows correctly in Mozilla Firefox 0.9.3 (0.1R1) by the way, but my boss wants it to be good in Firefox and Internet Explorer 5.5 and 6.0. Especially IE. I want it good in Firefox but darn... Firefox is the only one I get okay :P The problem is.... with IE it puts the links to the right side of the screen. I've tried lots of things to get it 302 pixels from the right side of the screen, but everything gave problems. I really hope somebody can give me an idea how I can fix it. It feels like it's just a small thing. hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d In Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
Aaaah! another problem... now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div. when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value). what now? thanks Hi, I'm having a familiar problem: with this page The the content on a contained and floated div is over running it's containing div. I have had this problem before and using something like: Code:
#innerwrap:after {
content:".";
display:block;
clear:both;
height: 0;
clear: both;
visibility: hidden;
}
Has worked before, but this time it's not. I'm having to specify a unique class and heitht for the #main box or use <br/>. It would be nice not to have to do this. Can anybody advise me what to look into please. Thanks James As always IE woes... Anyway I have a design that I'm currently reworking into a css/div positioned site. I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about. The HTML is: Code:
<div id="container">
<div id="top"></div>
<div id="brands">
....stuff here....
</div>
<div id="slides"></div> <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
<div id="vert_nav">
....stuff here....
</div>
</div>
CSS Code:
/* CSS Document */
html, body {
background: #000000;
padding: 0px;
margin: 0px;
color: #FFFFFF;
}
#container {
width: 760px;
padding: 0px;
margin: 0px;
}
#top {
width: 760px;
height: 239px;
background: url(../images/top.jpg) top left no-repeat;
}
#brands {
width: 760px;
height: 31px;
}
#slides {
width: 667px;
height: 350px;
float: left;
background: url(../images/slides.jpg) top left no-repeat;
T}
#vert_nav {
width: 93px;
height: 350px;
float: right;
}
should.jpg is how the page is supposed to look. shouldnt.jpg is how it is appearing in IE. sure i read an article on this somewhere but cant remember where, the problem is this Code: <div class="floated and cleared right"> stuff </div> <div class="fixed width" > <img class="floated left"> lots of text <div> related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif) if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div help! Hi, I have managed to rewrite my three column navigation page using floated divs instead of its original table (the page was written years ago and I am updating to get away from tables). This was hard for me because I am very new to CSS. My code validated and the page looks fine in IE but in Firefox the third or right column does not clear the middle column. I tried to google the problem but the explanations are way over my head. Also the only way I could get the blue border to not show up in firefox was to add the style directly to the image code. Can someone please help me. The link is www.medeaslair.net/myths.html. Here is the CSS 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>
<title>Greek Myths</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Rose A. Rosencrans" />
<style type="text/css">
body {
text-align: center;
padding-top: 45px;
background-image: url("images/tan_marble3.jpg");
color: black;
font-family: papyrus;
font-weight: bold;
font-size: 15px;
}
a:link {
color: blue;
}
a:visited {
color: green;
}
a image {
border-style: none;
}
#container {
margin: 0 auto;
width: 750px;
text-align: left;
}
#columnone {
float: left;
margin: 0;
width: 250px;
padding-top: 45px;
}
#columntwo {
float: left;
width: 250px;
padding-top: 45px;
}
#columnthree {
float: right;
clear: both;
padding-top: 25px;
}
h1 {
text-align: center;
}
h3 {
text-align: center;
}
#email {
text-align: center;
text-decoration: none;
padding-top: 150px;
border: 0;
}
ul {
margin: 0 auto
width: 750px;
}
li {
text-size: 12px;
text-decoration: none;
padding-right: 4px;
margin: 0 auto;
margin-bottom: 2px;
border-style: none;
list-style-type: none;
}
</style>
</head>
Here is the HTML Code: <body> <div id="container"> <img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" /> <img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" /> <h1>Tales of Greek Mythology</h1> <img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" /> <br /> <div id="columnone"> <ul> <li style="font-size: 15px; text-decoration: underline; padding-bottom: 4px;">Gods and Goddesses</li> <li><a href="aphrodite.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Aphrodite</li> <li><a href="apollo.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Apollo</li> <li><a href="artemis.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Artemis</li> <li><a href="athena.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Athena</li> <li><a href="dionysus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Dionysus</li> <li><a href="hades.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hades</li> <li><a href="hera.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hera</li> <li><a href="hermes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hermes</li> <li><a href="poseidon.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Poseidon</li> <li><a href="zeus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Zeus</li> <li style="font-size: 15px; text-decoration: underline; padding-top: 210px; padding-bottom: 4px;">Tales of Love and Woe</li> <li><a href="hermes.html#baucis"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Baucis and Philemon</li> <li><a href="cupid.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Cupid and Psyche</li> <li><a href="pan.html#echo"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Echo and Narcissus</li> <li><a href="pan.html#endymion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Endymion</li> <li><a href="artemis.html#orion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orion</li> <li><a href="orpheus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orpheus and Eurydice</li> <li style="font-size: 15px; text-decoration: underline; padding-top: 60px; padding-bottom: 4px;">Giants and Beasts</li> <li><a href="artemis.html#otus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Otus and Ephialtes</li> <li><a href="minotaur.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Minotaur</li> <li><a href="cyclopes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Cyclopes</li> </ul> </div> <!-- end of columnone div --> <div id="columntwo"> <ul> <li style="text-size: 15px; text-decoration: underline;">Men and Heroes</li> <li style="padding-top: 4px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Agamemnon</li> <li><a href="atreus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Atreus</li> <li><a href="daedalus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Daedalus and Icarus</li> <li><a href="athena.html#erichthonius"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erichthonius</li> <li><a href="heracles.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Heracles</li> <li><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Hyacinthus</li> <li><a href="hera.html#ixion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Ixion</li> <li><a href="atreus.html#orestes"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Orestes</li> <li><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Pentheus</li> <li><a href="perseus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Perseus</li> <li><a href="phrixus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Phrixus</li> <li><a href="pandora.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Prometheus</li> <li><a href="hades.html#sisyphus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Sisyphus</li> <li><a href="atreus.html#tantalus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Tantalus</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Tales of The Sea</li> <li style="padding-top: 4px;"><a href="sea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /> </a>Sea Myths</li> <li><a href="circe.html#glaucus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Glaucus and Scylla</li> <li><a href="sea.html#nereus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nereus</li> <li><a href="sea.html#sirens"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Sirens</li> <li><a href="sea.html#triton"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Triton</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 100px;">Tales of Interest</li> <li style="padding-top: 4px;"><a href="garden.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Mythic Garden</li> <li><a href="samhain.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Blessed Samhain </li> <li><a href="thor.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Thor</li> <li><a href="links.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Links and Credits </li> </ul> </div> <!-- end of columntwo div --> <div id="columnthree"> <ul> <li style="text-size: 15px; text-decoration: underline; padding-top: 20px;">Women and Witches</li> <li style="padding-top: 2px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Alcmene</li> <li><a href="athena.html#arachne"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Arachne</li> <li><a href="circe.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Circe</li> <li><a href="dionysus.html#erigone"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erigone and Icarius</li> <li><a href="zeus.html#europa"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Europa</li> <li><a href="zeus.html#io"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Io</li> <li><a href="zeus.html#leda"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Leda</li> <li><a href="leto.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Leto</li> <li><a href="medea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Medea</li> <li><a href="leto.html#niobe"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Niobe</li> <li><a href="pandora.html#pandora"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Pandora</li> <li><a href="persephone.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Persephone</li> <li><a href="dionysus.html#semele"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Semele </li> <li><a href="pan.html#syrinx"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Syrinx</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Satyrs and Centaurs</li> <li style="padding-top: 4px;"><a href="chiron.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Chiron</li> <li><a href="dionysus.html#midas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>King Midas </li> <li><a href="apollo.html#marsyas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Apollo and Marsyas</li> <li><a href="chiron.html#nessus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nessus</li> <li><a href="pan.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Pan</li> <li><a href="chiron.html#peirithous"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Peirithous</li> </ul> </div> <!-- end of columnthree div --> </div> <!-- end of container div --> </body> </html> I've never run into this before, but I have the following document structure and the right div's top margin is about 10px below the left in FF and Opera.(aligns fine in IE-AMAZING, but true) Every other time I have simply set the margin and padding both to 0px of my floated divs and it has brought it to the same height as my left div: NOTE: I apologize, I don't have a link, this is being developed off line right now. CSS code: Code: /* You guessed it, my container div */
div.container {
clear: both; /* clears two divs above it */
text-align: right;
width: 100%;
}
/* Left div */
div.left {
margin: 0px;
padding: 0px;
width: 49%;
}
/* Right div */
div.right {
float: right;
margin: 0px;
padding: 0px;
width: 49%;
}
xhtml markup: Code: <div class="container"> <fieldset class="info"> <legend>Get Information For Your Next Trip Here!</legend> <p> Before you venture out on your next road trip, get your directions here. </p> <form action="myform.php" method="get"> <div class="right"> <ul class="none"> <li><img src="images/end.png" class="mapimg" alt="Enter Where Your Trip Will End" title="Enter Where Your Trip Will End" /> <label for="address2">Address/Intersection:</label> <br /> <input type="text" class="fbgcolor" id="address2" name="2a" size="35" maxlength="80" /></li> <li><label for="city2">City:</label> <br /> <input type="text" class="fbgcolor" id="city2" name="2c" size="35" maxlength="50" /></li> <li><label for="state2">State:</label> <label for="zip">Zip:</label> <br /> <input type="text" class="fbgcolor" id="state2" name="2s" size="2" maxlength="2" /> <input type="text" class="fbgcolor" id="zip2" name="2z" size="10" maxlength="10" /></li> <li><input type="submit" value="Get Directions" /></li> </ul> </div> <div class="left"> <ul class="none"> <li><img src="images/start.png" class="mapimg" alt="Enter Where Your Trip Will Begin" title="Enter Where Your Trip Will Begin" /> <label for="address">Address/Intersection:</label> <br /> <input type="text" class="fbgcolor" id="address" name="1a" size="35" maxlength="80" /></li> <li><label for="city">City:</label> <br /> <input type="text" class="fbgcolor" id="city" name="1c" size="35" maxlength="50" /></li> <li><label for="state">State:</label> <label for="zip">Zip:</label> <br /> <input type="text" class="fbgcolor" id="state" name="1s" size="2" maxlength="2" /> <input type="text" class="fbgcolor" id="zip" name="1z" size="10" maxlength="10" /></li> </ul> </div> </form> </fieldset> <!-- End Container Div --> </div> Both my code and css validate just fine. Any ideas or good links? Before I state the problem, let me say that I am working towards properly validated html and css. There are a couple tables in my design that I put in just to show the boss something pretty! They will be gone soon. I have 3 places on the page where I'm using images as links to effect behavior with javascript or forms. My menu's going down the left side of this template has +/- "buttons" to toggle nested lists on and off. By using margin-top:-14px they are lining up slightly higher then needed in FF, slightly lower then needed in IE and way to high in Safari. If i set the margin-top to 0, then I get it lined up nicely in safari and IE and FF are off. The images inside of the <li>'s This is the css code I believe to be relevent css Code: Original - css Code .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div.redbox img.plusminus { float:right; margin:-16px 3px 0 0; padding:0 0 0 0; height:10px; }
.clearfix:after {
html Code: Original - html Code <li id="item1" class="border-bottom clearfix"> <a href="/store/category/50">T-SHIRTS</a> </li> <li id="item2" class="border-bottom clearfix"> <a href="/store/category/51">PANTS</a> <a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus" class="plusminus" id="img_item2" /> </a> <ul id="ul_item2" class="closed"> <li class="sidebarsub"> <a href="/store/subcategory/325">PROTECTIVE</a> </li> </ul> </li>
<li id="item1" class="border-bottom clearfix">
<a href="/store/category/50">T-SHIRTS</a>
</li>
<li id="item2" class="border-bottom clearfix">
<a href="/store/category/51">PANTS</a>
<a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus" class="plusminus" id="img_item2" />
</a>
<ul id="ul_item2" class="closed">
<li class="sidebarsub">
<a href="/store/subcategory/325">PROTECTIVE</a>
</li>
</ul>
</li>
Is this a common thing in CSS that there might be a tutorial out there on how to fix it? I've looked at using overflow and that doesn't seem to fix the problem. the link for the page... Template Thanks for having a look Hi, I've got a little problem. I have two floated DIVs (left and right) inside a non-floated DIV. Below that, I have another non-floated DIV. In Internet Explorer, the bottom DIV appears where the floating DIVs end. In Firefox, however, the bottom DIV god underneath the floated DIVs and sticks to the top. here's the related CSS: css Code: Original - css Code #content { padding: 34px 26px 0 26px; text-align: left; } #content #leftcol, #content #rightcol { height: 30px; padding: 0px; display: block; margin: 0px; } #content #leftcol { width: 532px; float: left; } #content #rightcol { width: 230px; float: right; } #footer { height: 95px; background-image: url(images/footerstrip.gif); background-repeat: repeat-x; width: 100%; text-align: center; margin: auto; float:left; }
The floated DIVs need to be height-flexible, so floating the bottom DIV relatively would not work. The bottom div needs to start at the bottom of the floating DIVs. I hope somebody can lend a hand - thanks in advance, all. In IE6, the right sidebar column drops down below the content or disappears and creates space below the content before the footer. On some of my other pages it happens and on others, it does not. Can anyone suggest the problem and/or solution? Best, Colin http://029c92a.netsolhost.com/abrasives/cuttingdiscs.html Hi Please let me know if I am posting what is required for answering my questions as I would like to make things as easy as possible for you. Here is my first problem:- I have been trying to move our sitesdesign across to being css based and in the large part have succeeded but I have run into difficulties when it comes to displaying our results. I am trying to wrap 9 search results on a page using float but the results I am getting are different between mac IE 5.1, opera 5 Mac (not that bothered though) and Windows IE 6.0. My problem is that on windows the float works as it should and wraps so that I have a grid of 9 images, on a mac the images wrap but jump to the bottom of my left floated navigation and then continue the grid and on opera they just don't wrap. The URL is URL CSS file URL Can anybody shed any light on why this might happen as I am a little lost. TIA hanonman Hey, Why does this look different in IE and in Firefox? Code: <html><body>
<div style="float:left;border:3px solid green;">Left div</div>
<div style="width:200px;border:8px solid black;">Right div</div>
</bodY></html>
In FF, the right div's border starts at the same place as the left div's border. In IE, the right div's border starts to the right of the left div. Thanks in advance... I am new to css, and am eager to build the equivalent of a work-week calendar using only css. Basically, a five item table without using table tags. I have succeeded with firefox, but for some reason I am getting an odd reordering of the div elements in IE. I will post the html and the css below, and could really use some pointers. I am sure it has something to do with the float commands, but am not even sure what to call this problem to search for it! Here's the html page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="killmer.css"> <title>Killmer's Science Page - Chemistry Assignments</title> </head> <body > <div class="left"> <h1><a href="chemcalendar.html" class="one">Chemistry Calendar</a></h1> </div> <div class="left"> <h1>Chemistry Textbook Online</h1> </div> <div class="left"> <h1>Chemistry Today Calendar</h1> </div> <div class="left"> <h1>Chemistry Today Textbook Online</h1> </div> <div class="right"> <img src="./images/logo.jpg" ></img> </div> <div class="right"> <h2>Chemistry Daily Assignments</h2>. </div> <div class="right"> <div class="monday"> <h1>MONDAY</h1> </div> <div class="tuesday"> <h1>TUESDAY</h1> </div> <div class="wednesday"> <h1>WEDNESDAY</h1> </div> <div class="thursday"> <h1>THURSDAY</h1> </div> <div class="friday"> <h1>FRIDAY</h1> </div> <div class="monday"> <h1>MONDAY</h1> </div> <div class="tuesday"> <h1>TUESDAY</h1> </div> <div class="wednesday"> <h1>WEDNESDAY</h1> </div> <div class="thursday"> <h1>THURSDAY</h1> </div> <div class="friday"> <h1>FRIDAY</h1> </div> </div> </body> </html> And here's the css a.one:link {color:black; text-decoration: none;} a.one:visited {color:black; text-decoration: none;} a.one:hover {color:red; text-decoration: none;} a.one:active {color:black; text-decoration: none;} body { background: url(./images/backgroundblend.jpg); background-repeat: repeat-y; background-color:black; } h1 { color:black; font-family:"times new roman",serif; font-size:100%; } h2 { color:silver; font-family:"times new roman",serif; } div.left { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:150px; font-family:courier, monospace; float:left; clear:left; margin:5px; } div.right { margin-left:250px; margin-top:0px; margin-right:0px; margin-botton:0px; padding:0px; } div.monday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px; float:left; clear:left; } div.tuesday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left;} div.wednesday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } div.thursday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } div.friday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } Thanks for the time! Hi Folks [I don't think my last attempt went through - I made a mistake], I have a page here with a problem that's occupied me for over a day. I can't get my non-floated 'DIV#left' to sit beside my floated 'DIV#right'. The DIV#left containing the subnav slips, or is forced down the page; http://johniwhite.com/tests/ireland/level_2.html I'd love to hear the easy answer! Here's the CSS: div#left_level2 { width: 130px; height: 50px; vertical-align: top; padding: 0; margin: 0px; /* display: inline;*/ /* border: 1px solid #0F0;*/ } div#right_level2 { float: right; width: 594px; height: 50px; padding: 0 0 0 0; margin-top: 0px; margin-right: 0px; vertical-align: top; } ---- The code for a more simple version at http://johniwhite.com/tests/ireland/2_col_test.htm <div id="middle"> <div id="right_level2"><!--the floated div for content--></div> <div id="left_level2"><!--the non-floated div for subnav--></div> </div> ---------- Love to hear thoughts, thanks John |
|||||||