CSS - Float:left Text-align:right Not Working!!!
When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!!
Similar TutorialsHi 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; } HTML: 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 Confused yet? What's the best way to accomplish this? page testimonials.css Main.CSS If you look at the page, you will see that I have the "signature" of the testimonial giver aligned right, but I would like the two p elements to be aligned along their left edge as well (but on the right side of the page, with everything flowing around any images)... I tried floating them right, which and clearing the floats, but then the testimonials don't flow around the images... can this be done without getting divitis? I have a row of icons (for navigation, with a text description underneath them) I am trying to break out of table design so I want these divs aligned next to each other, with the image/text centered. Everything looks pretty peachy... but in FF the text such as "Candidates" underneath the icon floats to the left because of the parent float.. it ignores the text-align: center. In other browsers it works but not in FF any help? Also if anyone has a better way of writing this code I would be open to suggestions since I am slowly breaking away from table design. Thanks! Code: .main #header { background: #FFFFFF; padding: 0 10px 0 10px; border-bottom: 1px solid black; border-top: 1px solid black; } .icon_nav{ font-size: 12px; float: left; text-align: center; margin-right: 12px; border: 1px solid black; } Code: <div id="header"> <div style="float: left"> <img src="images/logo.png" align="left" style="margin-right: 4px"/> <div style="color: #992204; font-size: 18px">XYZ Company</div> <div style="color: #992204; font-size: 14px">Professional Company</div> <div style="color: #992204; font-size: 12px">481-555-5555</div> </div> <div style="float: right;"> <div class="icon_nav"><img src="images/icons/home.png" /><br />Home</div> <div class="icon_nav"><img src="images/icons/employers.png" /><br />Employers</div> <div class="icon_nav"><img src="images/icons/candidates.png" /><br />Candidates</div> <div class="icon_nav"><img src="images/icons/directions.png" /><br />Directions</div> <div class="icon_nav"><img src="images/icons/event_planning.png" /><br />Event Planning</div> <div class="icon_nav"><img src="images/icons/contactus.png" /><br />Contact Us</div> </div> <br style="clear: both;" /> <!-- end #header --> </div> I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan this is kind of a crude copy/paste of my current code, but it shows the problem. 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> new document </title> <style> #contentstylesubheader { float: left; padding-left: 16px; height: 53px; padding-right: 30px; padding-top: 15px; } #contentstylesubheaderleft { float: left; font-size: 12pt; font-weight: bold; } #contentstylesubheaderright { text-align: right; position: relative; z-index: 100; float: right; } </style> </head> <body> <div id="contentstylesubheader"> <div id="contentstylesubheaderleft">blahblah</div> <div id="contentstylesubheaderright"> <span id="item_price">blah</span> <a href="#"><img src="../images/buynowbutton.gif" class="imgvalignmiddle padleftmedium padbottomsmall" alt="Add to Cart" /></a><br/> <a href="#"><img src="images/review_sm.png" alt="Review Our Payment Plan" /></a> </div> </div> </body> </html> 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> Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox? I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously. Thanks. OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something. Here's my css: Code: h1 { font-family:arial black; color:#666666; font-size:12pt; margin: 0; padding: 2px 0; text-align:center; } .footer_header_link{ text-align:center; font-family:arial black; color:#666666; font-size:12pt; margin: 0; padding: 2px 0; } You can see a sample testhere. Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link" Any ideas? thanks I have a <p> tag with text inside of it with a height of 20px and width of 100px. Horizontal text alignment works fine within in, but I want the text to sit in the middle of the tag and I just can't do it. It defaults to sitting at the top. I try vertical-align: middle, but that doesn't work. None of the the vertical aligns do anything in fact a div works with this style, but a span does not. i want part to be left (defalut by the css file style applied), and then the inline span style to be to the right. not working: Code: echo "<a title='".$link['desc']."' href='".$linkurl."' class='cmenulink'>".$link['title']."</a>"; echo "<span style='text-align: right; padding: 1px;'>In: ".$link['in']." Out: ".$link['out']."</span><br />"; if you don't know php... Code: <a title='abc' href='abc.com' class='cmenulink'>ABC</a> <span style='text-align: right; padding: 1px;'>In: 999 Out: 999</span><br /> 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 have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code: .wide_column_header { float:left; width:558px; margin:0 0 0 5px; background-image:url(../images/wide_header.jpg); height:21px; font-size:100%; font-weight:900; line-height:100%; vertical-align:bottom; color:#fff;} .headerbartext { font-size: 12px; font-weight:bold; text-align:right; padding-left:15px; line-height: 140%;} .headerbartextright { font-size: 12px; font-weight:bold; text-align:right; padding-right:15px; line-height: 140%;} 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? 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> 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? 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 |