|
CSS - Css Wrap Around Float Problem
I'm having a bit of trouble getting multiple <div> to wrap around a floated <div> in IE [tested in IE8].
Using "clear: all;" it looks fine in Chrome and Firefox, but I'd prefer it to validate properly, as well as getting it working in IE! Online example at http://www.afcwgb.co.uk/boxtest.php Any tips gratefully received 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Floating Boxes</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #C8C8C8;
font-family: Verdana, helvetica, arial, Geneva, sans-serif;
font-size: 11px;
text-align:center;
}
#boxtest_container {
margin-right: auto;
margin-left: auto;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
background-color: #FFA;
border: 1px solid black;
width: 790px;
padding: 5px;
}
#boxtest_header {
padding: 10px;
border: 1px solid black;
border-bottom: 5px;
}
#boxtest_index {
padding: 10px;
border: 1px solid black;
}
#boxtest_footer {
padding: 10px;
border: 1px solid black;
}
#boxtest_rightbox {
width: 225px;
border: 1px solid black;
background-color: #00ff00;
float: right;
padding: 5px;
margin-left: 5px;
margin-bottom: 5px;
display: block;
}
.boxtest_post {
border: 1px solid black;
clear: all;
overflow: hidden;
margin-bottom: 5px;
}
#boxtest_mainbox {
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="boxtest_container">
<div id="boxtest_header">Header</div>
<div id="boxtest_index">Index</div>
<div id="boxtest_mainbox">
<div id="boxtest_rightbox">
<div align="center">Rightbox</div>
<p>This box is "floated" to the right of the page.</p>
</div>
<div id="boxtest_leftbox">
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
</div>
</div>
<div id="boxtest_footer">
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10.gif" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> - <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</div>
</div>
</body>
</html>
Similar TutorialsHi, I have a site which, due to a lot of extraneous code from the CMS, essentially, looks like this: Code: <div id="wrapper"> <div id="header"></div> <div id="left-panel"> [content] </div> <div id="full-panel"> <div class="standard-article"></div> <div id="prices">[table goes here]</div> </div> <div class="clear"></div> </div> Basic CSS: Code: #wrapper {
width: 1007px;
}
#left-panel {
float: left;
width: 216px;
}
#full-panel {
width:735px;
}
The site is designed to be a fixed width of 1007px (and this is set in the CSS in various location: wrapper, header etc). My problem is that, within the 'prices' div, there is a table which can be many columns wide. At the moment, in IE6 (Firefox is fine), the full-panel div wraps down below the left-panel when I would actually prefer it to stretch outwith the boundary of the 1007px wide site. Is this possible? Can anyone assist? Thanks in advance. R Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you when text is displayed in a div.. it only goes 75% of the width of the div and then line breaks. I want it to go 100% of the div and then line break. How do i solve this. Here is the css for the div. Code:
.message {
float:left;
width:98%;
background-color:#EFEFEF;
border: 1px solid black;
padding:4px;
overflow:auto;
margin-left:3px;
min-height:120px;
}
Hi, For SEO reasons I'm trying to add an < H1 > tag around some text and have that text appear as the other text in a paragrah. The problem is any text I put in the h1 tags don't seem to wrap in IE or NS. Instead, if it needs to wrap it puts it on the next line. For example, if I had something that looked like: The quick brown fox jumped over the fence and ate the cat And I surround "brown fox jumped" in h1 tags, in IE and NS it would look like: The quick brown fox jumped over the fence and ate the cat Does that make sense? Any solution to that? The style I'm using is simply Code:
h1
{
position:relative;
font: 12px/14px Verdana;
display:inline;
margin:0;
}
TIA! Hi all -- I've been messing w/ this for awhile and don't know why it isn't doing what I want. I have some headings, and the color, size, etc. all work but when the heading wraps to the next line, they are too close together... I've tried everything I can think of, like line-height normal, inherit, pixels,percent, you name it, doesn't change. here is a page example: http://www.keepsakequilting.com/landing/halloween2010.aspx they are the pinkish headings near the images.. here is the css I have: #lpage-titlel { font-family:century gothic,avant garde,arial,sans-serif; color:#AD4266; font-size: 110%; line-height:normal; font-weight: bold; padding: 0; margin: 8px 2px 5px 17px; text-align: left; } #lpage-titler { font-family:avant garde,century gothic,arial,sans-serif; color:#AD4266; font-size: 100%; line-height:normal; font-weight: bold; padding:10px; margin: 8px 2px 5px 5px; text-align: left; } #lpage-titler a {color:#AD4266;text-decoration:none;} #lpage-titler a:hover {color:#AD4266; text-decoration:underline;} #lpage-titlel a {color:#AD4266; text-decoration:none;} #lpage-titlel a:hover {color:#AD4266; text-decoration:underline;} What am I missing?? Any help would be greatly appreciated. THANKS my website, uk-adult-deed-polldotcodotuk Ive jsut added a background but the background was within the content in the middle of the page in the empty spaces so i created a div i called wrapper and wrapped from under the global navigation bar to ablove the footer and i gave this div a white backgroung.. For the homepage, as you see, it worked and all the other divs and pictures stayed where they were. Please look at contact uk-adult-deed-polldotcodotuk/contact/ when i apply the same div, it pushes all the content down the page, why is it not remaining inside the div i wrapped it in like on the homepage? Im confused, any help greatly appreciated! 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?) I started a new post on this one because it is something I have just noticed in FireFox, but not in IE6. I have created a new html page with a top, middle and bottom div sections. The middle section contains two other div's, left and right. All these div's I wraped inside another div called container. What I did (with CSS) is set the container with a width of 400px, and a solid red border. I then set the top and bottom with a height of 40px each. I did not set the height of the middle section since that would grow according to its content. The right div I set it as float:right and the left div I set it as float:left. This worked fine but then I decided to set the bottom div as float:left ... and it broke in FireFox In FireFox, the container wraped only around the top div, and the other middle and bttom div remained outside that white container. Here is the code I used: 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;
text-align: center;
padding: 10px;
background: #00ff00;
}
.container{
width: 400px;
margin: 0 auto 10px auto;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid #d1c7ac;
}
.top {
height: 40px;
}
.middle{
/*
can not put height here,
since the middle section
data changes from page
to page.
*/
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 200px;
}
.bottom {
height: 40px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
Top Section
</div>
<div class="middle">
<div class="left">
Left Section.
</div>
<div class="right">
Right Section.
</div>
</div>
<div class="bottom">
Bottom Section.
</div>
<!-- placed here -->
</div>
</body>
</html>
As I said this problem only apears in FireFox, and in IE6 it does not show. I know I am doing something wrong, mostly because I still do not know all about what a float do. I know it is because of the float thing. because what I did is add an (space) before the end of the container div wraped around the middle, bottom and float as well. I am sorry for posting yet another question on floats. Thanks for any advise and sugestions. regards, sim085 I have the following pretty straight forward and simple layout borders For some reason the "right" floated div "Add Account" is not going to the right in FF3. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Borders</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
form
{
margin:0px;
}
.container
{
position:absolute;
top:0;
left:0;
}
.outer
{
float:left;
margin:10px;
background-color:#FFFFFF;
border:1px;
border-style:solid;
border-color:#990000;
}
.inner-left
{
float:left;
padding:10px;
}
.inner-right
{
float:right;
padding:10px;
}
</style>
</head>
<body>
<div id="container" class="container">
<div class="outer">
<div class="inner-left">
<form>
Filter
<input type="text" name="filer" id="filter" value="" size="20" />
<input type="submit" name="go" value="Go" />
</form>
</div>
<div class="inner-right">
<form>
Add Account
<input type="submit" name="go" value="Go" />
</form>
</div>
</div>
</div>
</body>
</html>
It renders correctly in FF2, IE6 and IE7, but I just can't figure how why it won't display correctly in FF3 (version 3.0.5 to be precise) - just when I thought I'd finally "mastered" most css issues! Any help greatly appreciated. I am trying to re-write a forum post box that is fully CSS and XHTML compliant. I have got this working successfully in Safari, Firefox and Opera on the Mac, but it fails on IE6 on the PC. I cannot work out what the problem is. Can anyone help? (URL fixed) http://centerstageproject.com/test/index2.html As you can see that box that contains the post flows to the same height whatever the content. Screen shot from Safari attached. In IE6 though the left content (ie member details) does not begin until the post content is finished on the right side of the box. Hello, I'm new to CSS and I'm in the process of building my first table-less page. It is quite exciting, but I'm having one major problem. For some reason, I cannot get my main content div to float next to my side bar navigation. In the normal write up, it works in IE but not Firefox or Opera. I took just the essential parts of the code to create a test page for this forum, and now it doesn't even work in IE!!! Here is the code: Code:
<html>
<head>
<style TYPE="text/css">
#topNav {
margin: 10px 0px;
border: 1px solid #000;
width: 100%;
}
#sideNav {
margin-right: 10px;
border: 1px solid #000;
width: 150px;
}
#main {
margin: 0;
border: 1px solid #000;
float: left;
}
</style>
</head>
<body>
<div id="topNav">
Top Nav
</div>
<div id="sideNav">
Side Nav
</div>
<div id="main">
MAIN CONTENT AREA
</div>
</body>
</html>
Any help would be greatly appreciated!!! (inline css for purpose of post only) Anyone know how to get the "float2" div to display at the upper right of the "containerDiv" div rather than pushed down to below "Float1"? Looking in firefox, I can't make this happen.Thanks in advance! Code:
<BODY>
<!--- MAIN CONTENT --->
<div id='Float1' style='width:150px; height:150px; float:right; display:block; border:1px solid black;'>
asdf
</div>
<img src='images/productdetails.gif' border='0' style='margin-left:18px; display:block; margin-top:10px;'>
<div id='containerDiv' style='width:560px; border:1px solid black; position:relative; display:block; vertical-align:top;'>
<div id='Float2' style='float:right; border:1px solid black; clear:right;'>
<img src='../thumbs/sku/test.gif' style='display:block; margin-top:2px;'>
</div>
</div>
</BODY>
Page: http://dev.donmyersministries.com/test.html Ok, time is money, I decided to change my design a little bit because the way I was headed wasn't working. Now this isn't, I'm fixin to just go back to tables, this is retarded. Anyway, my problem. In FireFox/Opera my right hand column is fine (2 column layout), in IE however, it is pushed down below the left hand column. The left hand side is floated left. An image if it helps at all: Please help, before I abandon CSS layouts, again. later Hello, Not so long time ago I had a problem in firefox when i placed float content in another div. Basically the parent div did not want to wrap my float div's. Thanks to Kravvitz I solved this by following the url over here http://css-discuss.incutio.com/?page=ClearingSpace However today I tried doing the same thing, and I realized that now, my screen is showing fine on FireFox, but not on IE6.0! here I placed some html to show my problem: Code: <html>
<head>
<style>
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
div.myBox{
border: 1px solid red;
display: inline-table;
}
div.myBox:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
div.dofloat{
float:left;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="myBox">
<div class="dofloat">
float1
<br />
<br />
</div>
<div class="dofloat">
float2
<br />
<br />
</div>
</div>
</body>
</html>
If you open this html page in firefox you will notice that a red border is wrapping two green boxes. However opening it in IE6.0 shows a red line in top, and the two green boxes under it. I know that this is because the float objects are not wrapped automatically, however the hack i have placed in the above html solved it for fire fox. What would be the best way to make it work in IE6.0 as well? I did find a hack, that is to place height: 1px; in the div.mybox body: Code: div.myBox{
border: 1px solid red;
display: inline-table;
*heght: 1px;
}
However I am not sure if this is the best way to tackle this problem... thanks for any comments Regards, Sim085 Hey, Im using floats to position a few forms/form-elements horizontally. But the last form (the signout button), gets shifted on the next line. Can someone explain me why this happens? This is the code i use: php Code: Original - php Code echo '<div style="float: left;... blabla">'; echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">'; echo '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">'; echo '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name"> '; echo '<input type="submit" name="search_now" value="Search" id="search_now">'; echo '</div>'; echo '</form>'; echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now"> '; echo '</div>'; echo '</form>'; echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">'; echo ' <input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">'; echo '</div>'; echo '</div>'; echo '</form>'; echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">'; echo '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="logout_now" id="logout_now" value="Sign out"> '; echo '</div>'; echo '</form>'; echo '</div>'; echo '<div style="float: left;... blabla">'; I would be VERY appreciative if someone could tell me why the big quote mark in the bottom left text box of this page does not look correct in IE7...it looks great in Firefox...the big quote mark should be raised above the text as it is in FF.... I'm floating 2 <p> elements there, and put borders around the <p> elements to see what was happening...I even put the <p> elements inside a container <div>, but that didn;t help....I reluctantly used a negative margin in FF, but the same doesn;t work in IE....Am I missing something simple here? Thanks for any help... Hello, I have developed some very simple code. This code is working well on FireFox (and also netscape) and Operan but not well on IE6. The code is very simple. I have a div tag that containes two other div's. One div contains text to be aligned to the left (using float: left) and another div contains a list (ul) to be aligned to the right (using float: right). The following is the code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.leftText {
float: left;
}
.rightText {
float: right;
}
.top ul {
width: 100%;
text-align:center;
margin: 0;
padding-left: 0;
border: 0;
list-style-type:none;
}
.top ul li {
display: inline;
text-align: center;
float:left;
border-right:none;
background-image: none;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="top">
<div class="leftText">
This is the text on the left.
</div>
<div class="rightText">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</body>
</html>
Now I did some testing before posting here. First of all I tried to hack it. What I did is add *float: right; inside the .top ul li {...} element. This naturally was not cought by FireFox and Opera, and thus the website still looked fine on these browsers. However when I tried it on IE6 I had a surprose. The list was alligned to the right, but instead of writing "one two three", it wrote "three two one". I do not know how best to solve it, and be greatfull for any advise. thanks and regards, sim085 I understand IE has many problems with 'float' in css. I've got a new layout I'm working on for a site, and everything is working great on it except one element on IE6. Part of the page, seen below, looks great on FF, Safari, & IE7: However, IE6 shows up as: Here's the CSS that governs this part of the layout: Code: div.search_and_cart div.account_box{
border: 1px solid #808080;
}
div.search_and_cart div.account_box p{
padding: 8px;
}
div.search_and_cart div.account_box div.checkout_button{
float: right;
width: 80px;
line-height: 30px;
text-align: center;
background-color: #F68428;
border: 0;
margin: 0;
border-top: 1px solid #808080;
}
div.search_and_cart div.account_box div.checkout_button a{
color: #FFF;
text-decoration: none;
font-weight: bold;
}
div.search_and_cart div.account_box div.cart_contents{
width: 153px;
line-height: 30px;
padding-left: 5px;
color: #FFF;
background-color: #808080;
border-top: 1px solid #808080;
}
Then here's the HTML: Code: <div class="account_box"> <p><span style="color: #000;">ACCOUNT</span><br /> See order status</p> <div class="checkout_button"><a href="#">CHECKOUT</a></div> <div class="cart_contents">2 items in my cart</div> </div> Any help would be greatly appreciated. Thanks! I've been working on this project for over a month and for some reason cant get my tic-tac-toe container to float in the middle of the page in IE6. The container that is causing the problem is called "<div id="tic-tac-toe">". It centers perfectly in Firefox and IE7 but stays far off to the right in IE6 no matter what I do. Please help if you can help me figure this out your a genius!! Here is a link to to the site: http://dev.blackstonemedia.net/dfh/products.html |
|||||||