|
CSS - How To Prevent Float's From Overflowing Their Parent Containers
If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping. -Luke Similar TutorialsWhen I am floating two containers or images my background color disappears. Why is that and what should I do instead? Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! I have this structure setup in XHTML Code:
<div class="contentShellHeader">
Header
</div>
<div class="contentShellContent">
Content
</div>
I'd like to have contentShellHeader's width to only be as wide as the text within it, but have contentShellContent be the width of the parent shell. Any idea how I can do this across all browsers? Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent. The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally? I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities. Here is the current CSS I'm using: Code: #test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}
should have read more in the forum. sorry. Hi, I have an irritating issue with netscape 6.2 on the PC. I have a div that is floated left and this div contains two child divs, also flaoted left. My understanding is that the parent div should be stretched by its children and this is what happens in msie 5.5+, mozilla firefox, netscape 7 and all the decent Mac browsers. Not however NS 6.2. Does anbody know why or a way of making it behave properly? Here is my code: 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" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
div {
border: 1px solid black;
float: left;
}
#d1 { background: #cff; padding: 10px;}
#d2 {
background: #cf6;
width: 200px ;
height: 100px;
}
#d3 { background: #cf9;
width: 200px ;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">ghdfghdfghdfgh</div>
<div id="d3">dfghdfhdfgh</div>
</div>
</body>
</html>
many thanks subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) First off, here is the url to the page I am working on: http://chaos.ramdu.net/projects/new_design/test.html And the code: Code:
<HTML>
<BODY STYLE="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; font-family: Georgia; background-color: #F0F0F0;">
<DIV STYLE="margin-left: -300px; left: 50%; width: 600px; background-color: #FFFFFF; border-left: 1px solid #707070; border-right: 1px solid #707070; position: absolute;">
<DIV STYLE="margin-left: 10px; padding-bottom: 20px; width: 578px; background-color: #6A90AB; border-left: 1px solid #707070; border-right: 1px solid #707070;">
<DIV STYLE="height: 10px; font-size: 0pt;">
</DIV>
<DIV STYLE="margin-left: -50px; width: 700px; height: 120px; background-color: #FFFFFF; border: 1px solid #707070; position: relative;">
test
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
The page renders as thought in FireFox, but in IE, the DIV containers expand to the width of the white DIV. I want the page to render in IE exactly as it does in FireFox, but I am at a loss to try and do it. I have nested tables and when an inner table has margin-left: 50px and width: 100%, the inner table overflows the outer table. The problem occurs with IE6 and Opera 7 (didn't test with Opera 8). Here is the code: Code: <style type="text/css">
table.cmnt
{
border-collapse: collapse;
margin-top: 8px;
border: 1px solid black;
width:100%;
text-align: left;
background-color: #EEEEEE;
}
</style>
<table border="1" width="70%" cellpadding="7">
<tr>
<td>
<table class="cmnt" cellpadding="3">
<tr>
<th>
Title
</th>
</tr>
<tr>
<td>
Text
</td>
</tr>
</table>
<table class="cmnt" style="margin-left: 50px;" cellpadding="3">
<tr>
<th>
Title
</th>
</tr>
<tr>
<td>
Text
</td>
</tr>
</table>
</td>
</tr>
</table>
Correct rendering with Firefox: Incorrect rendering with IE: (the images are cropped) Any ideas how to fix this? I used the following code to hide overflowing content in one of my earlier works. Not working this time, check it yourself (purple section), http://www.refinethetaste.com/html/ Code:
<style>
.playlist { float:left; width:474px; height:80px; background:#FFF; overflow:hidden; }
.playlist .entries { position:absolute; width:10000em; }
.playlist .entries a { float:left; width:452px; height:60px; font-size:9px; padding:10px; background:#90F;}
.playlist .entries a:hover { background-position:-211px 0; color:#000; }
.playlist .entries a.playing { background-position:-422px 0; }
.playlist .entries a.paused { background-position:-633px 0; }
.playlist .entries a.progress { opacity:0.8; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { float:left; width:20px; height:60px; margin:15px 0; background:url(/html/themes/default/images/home_carousel_arrow_left.png) no-repeat; display:block; cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(/html/themes/default/images/home_carousel_arrow_right.png); }
</style>
I'm kinda new to css and trying to do this layout with CSS looks ok it IE but I cant get Netscape containers to expand. http://countrystampinangel.com/test.html http://countrystampinangel.com/test.css On the this page you will notice the ASDF overflowing into the footer if you resize the page to 1024x768 size. I'm trying to keep the footer on the bottom but the content still seems to creep into the footer? Any ideas? This only happens in IE 6 and 7, FF seems to handle it just fine. I w3c checked everything, html is good to go, css has some warnings but nothing that I seem to have to worry about. Any help is greatly appreciated. Hello everyone, I am pretty new to css but have code from various css sites that have used to get the layout i wanted. I am having an issue with IE7. In IE8 and Chrome everything is working like intended. The link to the page in question is philadler.com/dance09.html I have validated the CSS and xhmtl and the page passed both. Can anyone tell my why in IE7 the content is overflowing into the right column, but in the other 2 browsers i have tested it works fine. Also, does anyone know of a good photo gallery. Some of the events i will be putting have hundreds of pictures is there an auto formating or auto coding gallery that will look at the folder of the pictures and at it to the gallery? Thanks for any help Phil Hi, I am really stuck and need some help. I have created an alphabet of links across the top of a page. The mark up is like this; <div id="alphabet"> <a href="#">a</a> <a href="#">b</a> ... </div> Along with an Eric Meyer reset.css stylesheet it has the following CSS applied; #alphabet{ width: 940px; margin: 0 auto;} #alphabet a { text-decoration: none; color: #757575; font-size: 20px; margin: 5px 5px; padding: 5px 5px; border: 1px dashed #757575;} #alphabet a:hover { color: #333; border: 1px solid #333; } #alphabet a.current-letter{ background: #545353; color: #ffe224; font-weight:600;} The problem I have is that the #alphabet container only has the height of links' text. It does not included the padding, margin or border. Therefore if I apply a background to #alphabet the links' top and bottom borders appear outside of the div. I have tried adding overflow: hidden/auto but that only resulted in making the bit outside the div disappear. Anyone got any ideas??? Thanks in advance Hey it's a Friday night and I'm having the worst problems with IE. My page looks ok in FF and Safari but in IE the body is overflowing by like 350px or so. I don't know why it's doing this. I've used my Firebug but it doesn't really style that overflow section. It's like a ghost section. Doc type is XHTML strict, here's the pertinent CSS. Thanks for any help you can offer. This is kind of ruining my friday night. Code:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, Sans-Serif;
background: #000 url('img/mainbg.jpg') top left repeat-x;
text-align: center;
width: 100%;
padding: 0;
margin:0;
height: 1200px;
}
#icontainer {
background-image: url('img/containerbg.jpg');
margin-right: auto;
margin-left: auto;
width: 974px;
height: 1200px;
}
#plain {
background-image: url('img/plainback.jpg');
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
margin-top: 0;
width: 974px;
height: 1200px;
overflow-y: hidden;
}
I'm having a problems with a form overflowing it's containing div Link removed The html: Code:
<div id="mainbody">
<h2>Manage Double rooms by day</h2>
<br/>
<form name="list" id = "calendarmonth" action="" method="post">
....
</form>
<form name="list" id="#updatedays" action="updatewebroomdays.php" method="post">
...
</form>
</div>
Code: #mainbody {
padding:0;
margin: 4em;
position:relative;
}
#content {
position:relative;
background-color:#ffffff;
margin-top: -1em;
}
I can fix it buy adding another div around the containting div, like this Code: <div id="content">
<div id="mainbody">
<h2>Manage Double rooms by day</h2>
<br/>
<form name="list" id = "calendarmonth" action="" method="post">
....
</form>
<form name="list" id="#updatedays" action="updatewebroomdays.php" method="post">
...
</form>
</div>
</div>
.... but I don't know why this fixes it and what I'm doing wrong... Thanks James Hey it's a Friday night and I'm having the worst problems with IE. My page looks ok in FF and Safari but in IE the body is overflowing by like 350px or so. I don't know why it's doing this. I've used my Firebug but it doesn't really style that overflow section. It's like a ghost section. Doc type is XHTML strict, here's the pertinent CSS. Thanks for any help you can offer. This is kind of ruining my friday night. Code:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, Sans-Serif;
background: #000 url('img/mainbg.jpg') top left repeat-x;
text-align: center;
width: 100%;
padding: 0;
margin:0;
height: 1200px;
}
#icontainer {
background-image: url('img/containerbg.jpg');
margin-right: auto;
margin-left: auto;
width: 974px;
height: 1200px;
}
#plain {
background-image: url('img/plainback.jpg');
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
margin-top: 0;
width: 974px;
height: 1200px;
overflow-y: hidden;
}
I am constructing a new website and need help preventing the header text from overflowing. I have tried combinations of overflow:hidden; but does not seem to work. The site is here. Advice on how I can prevent overflow for FFox, IE6/7 appreciated. i am working for a client that is strict on making sure that all code is up to standards. the question i have is, how can i use the same class container twice in the same page and have everything up to standards? the catch is the doctype has to be XHTML 1.0 Transitional and i can't have the same id twice on the page. i'd hate to make 2 classes for the same style. any suggestions? Code: <ul id="headerfooter"> <li><a href="link1.html">header link 1</a></li> <li><a href="link2.html">header link 2</a></li> <li><a href="link3.html">header link 3</a></li> </ul> Code: <ul id="headerfooter"> <li><a href="link1.html">footer link 1</a></li> <li><a href="link2.html">footer link 2</a></li> <li><a href="link3.html">footer link 3</a></li> </ul> I have partially succeeded in making a table of products that changes column number depending on page width. The magic of DIVs. It's been a dream of mine . LOL. Problem is I can't figure out how to center the shown container objects in each row. So, unless the width of your browser is just right, everything ends up off-center. (http://www.harpgallery.com/showroomdetail/cat_id/4/) I've been looking at how Newegg does it, but I just can't figure out what they've done to get their containers to dynamically resize and float like they do. It's a work of CSS art for sure. I snipped out the code I'm using to make the page. I was hoping some of you here would have some ideas? Thanks! Code:
--The HTML--
<table border='0' cellpadding='2' cellspacing='2' bgcolor='#000000' width=100%>
<tr><td>
<div id='HomepagePrd'>
<div class='Section'>
<div class='product'>
<div class='prodImage'><a href='Product URL'><img Border='0' src='Image URL' height=150 align='top' /></a>
</div>
<div class='desc'>
<h3><a href='$PDurl' ><font color=white face=georgia,arial>Product Name</font></a></h3>
</div>
</div>
</div>
</div>
</td></tr>
</table>
--The CSS--
#HomepagePrd{width:100%;clear:both;min-width:472px;}
.Section{float:left;width:240px;}
.product{
position:relative;
width:100%;
margin:5px 2px 2px 5px;
height:180px;
}
.prodImage{text-align: center;position:relative;width:100%;}
.desc{position:relative;width:100%;margin:0px;padding:0px;}
.desc h3{text-align: center;font-size:12px;margin:0px;padding:0px;}
Hi, I need help with a container div. Something is screwy in the way I have nested my divs and I think it has something to do with position: relative or absolute. I get the difference between the two, but not the relationship. Can someone tell me what I'm doing wrong? http://idiaonline.com/websites/taz/index.php Code: <div id="container">
<div class="logo"></div><div class="top"></div>
<div class="navline"></div>
<div class="navbar">
<div class="navsquare"><img src="images/faq.gif" alt="Taz Limousine Service Policy" width="43" height="41" /><br />F.A.Q.</div>
<div class="navsquare"><img src="images/fleet.gif" alt="Our Vehicles" width="43" height="41" /><br />Fleet</div>
<div class="navsquare"><img src="images/contact.gif" alt="Contact Us" width="43" height="41" /><br />Contact</div>
<div class="navsquare"><img src="images/maps.gif" alt="Maps & Directions" /><br />Maps</div>
</div>
<div class="content">
<div id="left">
<div class="about">
<p><br />
<br />
Taz Limousine is dedicated to dependable,courteous and quality service for business or personal transportation at competitive pricing. In order to achieve that goal in a secure and comfortable environment we rely on experienced chauffeurs and well maintained vehicles that meet city, state and federal regulations. Thank you for considering Taz Limousine Service.</p>
<p> </p>
<div class="weather">
<div align="center">
<br />
<p></p>
</div>
</div>
<div style="float:right; width:150px;"><br /><br />
<h2> Atlanta, GA</h2>
</div>
</div>
</div>
<div id="mid"> <div class="rotate"><img src="images/rotate/rotate.php" alt="Limousine Service Atlanta" /></div></div>
<div id="right"><div class="special">
<h1> Reserve A Limo Today!</h1>
</div></div>
</div>
</div>
and css Code:
body, html {
font-family:Arial, Helvetica, sans-serif;
color:white;
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: underline;
color: #0000FF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#container {
width:800px;
margin: 0px auto;
position:relative;
background:#000033;
border: thin #0000ff solid;
}
.top {
height: 108px;
width: 800px;
position: absolute;
left: 0px;
top: 0px;
background-image:url(images/gradient.jpg);
background-repeat: repeat;
z-index: 2;
}
.logo {
background-image: url(images/taz-logo.gif);
background-repeat: no-repeat;
background-position:top;
height: 60px;
width: 305px;
left: 0px;
top: 25px;
z-index:4;
position:absolute;
}
.navline {
background-image: url(images/blk-gradient.jpg);
background-repeat: repeat-x;
position: absolute;
height: 42px;
width: 100%;
left: 0px;
top: 108px;
z-index: 3;
}
.content {
background:#000033;
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
z-index: 1;
border:solid #0000ff thin;
}
.navbar {
position: absolute;
height: 60px;
left: 60%;
top: 75px;
z-index: 15;
width:288px;
}
.navsquare {
position:relative;
float:left;
height:60px;
width:72px;
background-image:url(images/nav-square.gif);
background-repeat:no-repeat;
text-align:center;
font-size:9px;
font-style:italic;
}
.about {
position:relative;
left:5%;
top:40%;
background-image:url(images/about_taz_limousine.gif);
background-repeat:no-repeat;
width:225px;
height:150px;
font-size:10px;
padding-left:25px;
z-index:4;
}
.rotate {
position:relative;
top:10%;
z-index:3;
}
.weather {
position:absolute;
background-color:#000033;
top:159px;
background-image:url(images/weatherbox.jpg);
background-position:left;
background-repeat:no-repeat;
height:81px;
width:94px;
left: 6px;
}
.special {
background-image:url(images/special.gif);
width:271px;
height:88px;
position:absolute;
text-align:center;
top:15%;
}
#left {
float:left;
position:relative;
top:200px;
width:35%;
z-index:50;
}
#mid {
float:left;
position:relative;
top:175px;
width:35%;
}
#right {
float:left;
position:relative;
top:200px;
height:300px;
width:30%;
z-index:30;
}
h2 {
font-size:15px;
}
h1 {
font-size:18px;
font-variant:small-caps;
}
|
|||||||