|
CSS - Right An Left Floats Float Over Other Divs
Hi all,
This is really annoying me and I don't think it should happen!! If you see this page, you will see one of the divs spans the whole page and it has gone behine the floated left element. Now if it wnt below it that would be OK as a block level element, but the content is in the right place. If you reduce the width it sits in its place OK. I think this is strange behavior.... is it correct????? http://www.wellandpower.net/website...req=www_contact Regards Charlie Similar TutorialsHTML: Code:
<div id="title" class="title_lower_color">
<div class="title">TITLE</div>
</div>
<div id="main">
<div class="grouptitle1">Group 1
<div class="grouptext1">blah blah blah blah blah blah blah blah
</div>
</div>
<div class="grouptitle2">Group 2
<div class="grouptext2">blah blah blah blah blah blah blah blah
</div>
</div>
</div>
CSS: Code:
body {
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
.title {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #000000;
font-weight: bold;
background-color: #CCCCCC;
border-color: #000000;
border-bottom-style: solid;
border-bottom-width: thin;
width: 100%;
float: left;
position: relative;
}
.title_lower_color{
background-color: #666666;
border-color: #000000;
border-left-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-top-width: thin;
width: 100%;
height: 40px;
float: left;
position: relative;
}
.grouptitle1{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
width: 300px;
float: left;
}
.grouptitle2{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
margin-left: 10px;
float: left;
}
.grouptext1 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
width: 300px;
}
.grouptext2 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
}
I've only just started using CSS rather than tables. The title bit is ok. The problem is the main <div>. In Firefox l can't seem to get the two divs (grouptitle1 & grouptitle2) to float side by side. The only way l can do it is by setting grouptitle2 to a certain width. But l want grouptitle2 to fill the remaining width of the screen whatever size the browser is and not be a set width. Is there any way so that l can make the two divs appear side by side without adding a width to the grouptitle2?? here's a working version: Clicky Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
I always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? 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 Hi, I have this page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB I'm having some issues with my images showing up properly in IE6. They look fine in Safari & Firefox. Basically there is a container div and then individual divs that display an album cover along with a description. In IE6, the images aren't in the divs, but are at the top. Anyone know what the fix is? #container { padding: 0px; margin-top: 10px; margin-bottom: 20px; margin-right: auto; margin-left: auto; background: #333; border: 0px; text-align:center; width: 635px; } #center { padding: 10px; margin-top: 10px; margin-bottom: 0px; margin-right: auto; margin-left: auto; background: #666; border: 2px solid #000000; text-align:left; width: 610px; } #container p.album-cover { float:left; padding:0; margin-top: 0px; margin-bottom: 0px; margin-right: 10px; margin-left: 0px; } #container .album-info { ... just font properties; } Code:
<?php loop through albums to display each one; ?>
<div id="center">
<p class="album-cover">
<?php <a href="..."><img src="..." ></a> ?>
</p>
<p class="album-info">
<?php ..description... ?>
</p>
</div>
?>
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. I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days... Anyhow, consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #00ff00; } /* end #base */
#main {
background: #0000ff;
margin: auto;
text-align: left;
width: 800px; } /* end #main*/
#content {
background: #ffffff;
border-left: 1px solid #0000ff;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #0000ff; } /* end #content */
#bottom_part {
padding: 0;
line-height: 130%;
padding-left: 1em;
padding-right: 1em;
display: block;
margin: 0;
border: 0;
clear: both; } /* end #bottom_part */
#column_a {
padding: 1em;
margin: 0;
float: left;
width: 33%; } /* end #column_a */
#column_b {
margin-left: 33%;
margin-right: 33%;
padding: 1em;
padding-right: 0;
width: 25%; } /* end #column_b */
#column_c {
display: block;
float: right;
padding: 1em;
width: 33%; } /* end #column_c */
#bottom {
background: #ff0000;
border: none; } /* end #bottom */
.header { font-weight: bold; }
</style>
</head>
<body>
<div id="base">
<div id="main">
<div id="content">
<div id="bottom_part">
<div id="column_a">
<p class="header">Column A</p>
<p>A - A</p>
<p>A - B</p>
<p>A - C</p>
</div>
<div id="column_c">
<p class="header">Column C</p>
<p>C - A</p>
<p>C - B</p>
<p>C - C</p>
<p>C - D</p>
<p>C - E</p>
<p>C - F</p>
</div>
<div id="column_b">
<p class="header">Column B</p>
<p>B - A</p>
<p>B - B</p>
<p>B - C</p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</div>
</body>
</html>
The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other. Hi all, I'm a beginner to floating divs etc. so I've been following a tutorial to get what I need and I'm tweaking it here and there. Trouble is I've obviously tweaked something incorrectly. The two column's in the contentHoldingDiv don't line up correctly. Does anyone feel like taking a look at my code and telling me what I've done wrong (any other comments freely welcomed - it's the only way I'll learn). Here's the HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="holdingDiv">
<div id="topDiv"><p>You are logged in as <strong>Guest</strong></p></div>
<div id="headerPicDiv">Header Pic</div>
<div id="navDiv">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="contentHoldingDiv">
<div id="contentDiv">
<h2>Column 1</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="rightDiv">
<h3>Column 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
</div>
<div id="footerDiv">
<p>
Site design by <a href="mailto:Lee@LTheobald.co.uk">Lee Theobald</a>
</p>
</div>
</div>
</body>
</html>
And here's the CSS Code:
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #E6E6E6;
margin: 0px;
padding: 0px;
min-width: 760px;
}
#holdingDiv {
background-color: #F8F8F8;
margin: 20px auto;
width: 760px;
}
#topDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
}
#topDiv p, #topDiv strong {
line-height: 25px;
text-align: right;
padding-right: 5px;
margin: 0px;
font-size: 10px;
}
#headerPicDiv {
height: 125px;
border: 1px solid #D4D4D4;
}
#navDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
line-height: 25px;
padding: 0 5px;
}
#navDiv ul {
margin: 0px;
padding: 0px;
}
#navDiv li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#contentHoldingDiv {
border: 1px solid #D4D4D4;
padding: 0px;
margin: 0px;
clear: both;
}
#contentDiv {
background-color: red;
width: 600px;
float: left;
}
#contentDiv p {
padding: 5px 3px;
margin: 0px;
#rightDiv {
background-color: orange;
width:157px;
margin-left:600px;
}
html>body #rightDiv {
width:160px;
}
#footerDiv {
height: 15px;
background-image: url(images/gradient15.jpg);
border: 1px solid #D4D4D4;
}
#footerDiv p, #footerDiv a {
line-height: 15px;
text-align: center;
font-size: 9px;
margin: 0px;
}
Cheers, Lee Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another. However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option. Here is my example; Code:
<html>
<head>
<style>
.main {
margin: 0px auto;
width: 800px;
border: 2px solid red;
}
.wrap:after{
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{height: 1%;}
div.wrap{display: block;}
/* End hide from IE-mac */
.left {
float: left;
width: 100px;
}
.right {
float: left;
width: 680px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
<div class="right">My Right div has only one line but need border till down there ...</div>
</div>
</div>
</body>
</html>
As you can see in the example the border of the right div does not go down till the bottom border of the main div. I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. I came across this today and realized I didn't have a nice clean answer for how to handle it. A client was editing a page where text was wrapping around an image. Something like this: Code: <div style="border: 1px solid blue; float: left; width: 100px; height: 200px">image</div> <p>This is some text.</p> <ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> She asked why the bullets weren't appearing. Sure enough, the bullets appear underneath the float, not next to it. Now I could enclose the bullets and the paragraph in a div and give that div some left padding, but this is a free form text page where she should just be able to type and have the text flow around the floated element. I shouldn't have to manually tweak styles on elements just so she can have bullets show up in the right place. Is there an easy CSS method to make the bullets appear in the right place whether they're next to a floating element or not? Say I have the code: Code: <div style="float: left">left</div> <div style="float: right">right</div> In Opera, Firefox and IE, "left" will be on the left side of the scren, "right" will be on the far right. Now let's say I nest those two in a parent. I want the parent to expand with the child's content, so I float it too: Code: <div style="float: left;"> <div style="float: left">left</div> <div style="float: right">right</div> </div> In Firefox in IE, "left" is still on the far left and "right" on the far right. In Opera, it collapses the div so they're right next to each other, or "leftright". Now I could set a width of 100% on the parent, but the situation I'm actually using something like this in is more complicated -- padding, margins, etc. So setting a width of 100% makes the parent overflow it's parent nodes. I've tried not floating the parent and setting it to overflow: auto, but that doesn't seem to work either. Is there an easy fix I'm missing? hey all, i have divs within a div but the inner div with the text does not expand the main wrapping div with so the main wrapping div is very thin and the text just goes over it?? here is the code Code: <div id="greyinset"> <div id="insetcontent"> <form name="form1" method="post" action=""> <div id="insetcontentL"> <div align="left"> <label>Smoking:</label> <br> <label>Bed Type:</label> <br> <label>Accessible:</label> <br> </div> </div> <div id="insetcontentR"> <div align="left"> <input name="smoking" type="radio" value="yes"> yes <input name="smoking" type="radio" value="no" checked> no<br> <input name="radiobutton" type="radio" value="radiobutton"> King <input name="radiobutton" type="radio" value="radiobutton"> Two Beds <input name="radiobutton" type="radio" value="radiobutton"> No Preference<br> <input name="accessible" type="checkbox" id="accessible" value="yes"> </div> </div> </form> </div> </div> and the css code Code:
#greyinset { width: 100%; background-color: #eee; border: 1px solid black; clear:left; }
#insetcontent {width: 100%; padding: 3px 10px 3px 10px; white-space:normal;}
#insetcontentL {width: 50%; float: left;}
#insetcontentR {width: 50%; float: right;}
any ideas?? or do i have to go back to trusty tables thanks RF Internet Explorer 7 has an odd way of dealing with adjacent left and right floats in a container without set width. Instead of leaving the parent div to its natural content width as a float, IE7 forces the right-floating div to float right until it meets an element with a fixed width, or otherwise the document margin. IE8 and other browsers float the items correctly. The example below was meant to do a menu with rounded buttons, the two rounded images floated to the left and right edges of the button containing the text. The button should only be the width of the text link plus the rounding divs. This is easily fixed by adding a fixed width to the floating container div. However this may not always be the desirable action when div content widths may vary -- especially if space is at premium. Is there any decent way to fix this without resorting to ugly hacks? An easy way to make rounded corners for buttons that are floating. Perhaps use ul/li as the menu item container elements -- would that make any difference? ul/li come with their semantic limitations however, as far as their contents are concerned. (No divs for one.) 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>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
background-color:#ffffff;
font: 12px Verdana;
}
.container {
border: 1px solid #000;
padding: 5px;
background-color: #eee;
width: 500px;
}
.button_holder {
float: left;
margin: 1px;
/* width: 100px; */ /* IE7 wants width! Comment out and it floats right. */
}
.top_button_left {
/* background-image: url(../images/top_button_left.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: left;
cursor: pointer;
}
.top_button_right {
/* background-image: url(../images/top_button_right.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: right; /* This bugs the hell out of IE7: right float inside left float floats to the right of the first container with specified width */
cursor: pointer;
}
.top_button_mid {
/* background-image: url(../images/top_button_mid.png); */
background-repeat: repeat-x;
background-color: #ccc;
height: 31px;
cursor: pointer;
float: left;
}
.top_button_link {
padding-top: 7px;
padding-left: 13px;
padding-right: 13px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<b>Three buttons, the sides of which float to the right extreme in IE7</b>
<br />
<br />
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="index.html" title="Home">Home</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="other.html" title="Home">Other</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="weather.html" title="Home">Weather</a>
</div>
</div>
</div>
<br style="clear: both;" />
</div>
</body>
</html>
|
|||||||