|
HTML - Float Issue
Hi,
I'm having a layout issue. The image below shows how my #mainleft and #mainright are overflowing the #main div and how it SHOULD live in the #main div Here is my CSS: Code: #main {
padding: 30px 0 30px 30px;
border-bottom: 1px solid #c0c0c0;
}
#mainleft{
float: left;
width: 560px;
background: #000;
}
#mainright{
float: right;
margin-right: 30px;
width: 300px;
background: #336699;
}
#promo{
:
:
}
HTML Code: <div id="main">
<div id="mainleft">
</div>
<div id="mainright">
</div>
</div>
<div id="promo"></div>
I've tried using clear, but i'm not sure if i'm putting it in the right place, Thanks, Joe Similar Tutorialshere is my html Code: <div style=" margin-bottom: 0.5em; font-weight: bold; width: 100%; border: 1px solid #0079D6 ; "> <div style="float: left; width: 75%; " > <ul style="margin: 0pt 0pt 0.5em 0.5em; list-style-type: none; list-style-image: none; list-style-position: outside; "> <li>Grant Program: <label style="font-weight: normal;" wicket:id="porgramName"/> (<label wicket:id="porgramAcronym"/>)</li> <li>Action Official: <label style="font-weight: normal;" wicket:id="grantsOfficerfname"/> <label style="font-weight: normal;" wicket:id="grantsOfficerlname"/> </li> </ul> </div> <div style="float: left; width: 25%;"> <ul style="margin-left: 0.5em; list-style-type: none; list-style-image: none; list-style-position: outside;"> <li><a href="" wicket:id="assignGrantsOfficerLink">Assign Action Official</a></li> <li><a href="" wicket:id="assignFindingdsLink">Assign Finding(s) to Grant Program</a></li> </ul> </div> <table cellspacing="0" class="dataview" style="margin-left: .5em; width: 95%;" wicket:id="programFindingsContainer" > <thead> <tr> <th>Finding #</th> <th>Finding Type</th> <th style="text-align: right;">Recommended Amount</th> <th>Grant Identifier</th> <th>Appropriation Number(s)</th> <th>CAN(s)</th> <th>Action</th> </tr> </thead> the first two divs works fine , but the third table floats left and dosent come below the div, ,please suggest how can I push the table below the div , Its working in IE and firefox but not in chrome , please suggest me I have a little problem, I have made a banner that always stick to the top, you can see it here http://moamo.co.uk (my testing server atm) I need the search bar to be placed to the very right of the bar. I need it the have padding on the right side, the same amount as there is with the Home button on the left to the very left (If ya understand what I mean) CSS: Quote: SOLVED } HTML: Quote: SOLVED Thank you very much. I'm trying to get into the habit of going to tableless layouts. As an alternative, I'm using the float property. The layout looks fine in IE7 but looks horrid in Firefox. View in FireFox View in IE7 The first problem that I have is the div container that backgrounds the content. The second problem is the alignment of that div in Firefox. The third problem is why does the floating right content jump down in Firefox? I've attached index.html and style.css in the attachment. I'd appreciate the help. hello fellows, I am new here and dont have much experience but trying to learn html and css. English is not my first language so please ignore my grammar mistakes. I am trying to line up divs in a row but seems I am failed to do it. I can do it by using tables but just wonder if it could be done without inserting tables. Here is my test page which I want to fix. Here is other test page contains tables. Any help would be much appreciated. Hey guys, Im working on a website for a project at the moment and am having some problems with how it is rendering in IE. I have an image floating to the right of some text, and want the text (In two different divs) to wrap around that picture. Works fine in Firefox but doesnt seem to want to work in IE. I've spent this morning trying to get it to work, looking for different fixes around the place but cant seem to get any of them to apply to my code. Any help would be greatly appreciated. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kling:2 Educational Wall Decorations</title>
<meta name="keywords" content="Wall Stickers, Wall Decorations, Educational Wall Stickers, Kling, Kling:2, Static, Childrens Wall, Childrens Decorations, Room Decorations, Childrens Educational Wall Stickers, Education, Early Learning, Child learning, Kids Wall Stickers, Kids Wall Decorations" />
<meta name="description" content="Kling:2 Educational Wall Stickers are a new way to not only decorate your childs room, but to also introduce them to learning in the home environment." />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_header">
<div id="header">
</div>
</div>
<div id="main_body">
<div id="body">
<div id="menu">
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="./">Home</a></li>
<li><a href="./">About Us</li>
<li class="dir"><a href="./">Activities</a>
<ul>
<li><a href="./">Purchase</a></li>
<li><a href="./">About Us</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Contact</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir"><a href="./">Store</a>
<ul>
<li class="dir"><a href="./">New</a></li>
<li class="dir"><a href="./">Used</a></li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul></li>
<li>Gallery</li>
<li><a href="./">Contact Us</a></li>
</ul>
</div>
<h1>why choose us?</h1>
<div id="front_photo"> <img src="images/wall.jpg" alt="css image" /> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum. <a href="#">More...</a></p>
<!--services start -->
<div id="concept">
<h2>new services R Richardson</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum. </p>
<!--services end -->
<br class="blank" />
</div>
</div>
<div id="main_footer">
<div id="footer"><!--footer navigation start -->
<ul>
<li><a href="#" class="mg">Home</a>|</li>
<li><a href="#">About Us</a>|</li>
<li><a href="#"> Activities</a>|</li>
<li><a href="#">Store</a>|</li>
<li><a href="#">Gallery</a>|</li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>© Kling:2. All rights reserved. 2009.</p>
</div><!--footer navigation end -->
</div>
</div>
</body>
</html>
The problem is at - http://dynamixco.com/ You see I have floated frame1 and frame2 is horizontal to it... in firefox frame2 is a little below frame1 causeing it too look bad anyone know the solution? (both html and the css are validated) EDIT: now that I think of it, Im sorry if this is in the wrong section O.O EDIT: Resolved, the solution was floating one frame left and the other right. On my site I have a div box set to float right, with some text on the left side. When I do this however the text looks quite choppy and each line terminates at a different point. This is what it looks like: This doesn't look too good, and I was wondering if there was anyway to use HTML or edit the CSS class of the box itself so that each line terminates at roughly the same point? Hello, i recently attempted to swap from a table style nav bar to getting them to float you can see my before and after here. Befo www.cleverblobs.co.uk/index2.html after: www.cleverblobs.co.uk/index1.html Is there any way to get text to float from one cell to the other? And if not, is there any other way i can solve the problem of getting text around a picture? example: <table> <tr> <td>text start</td> <td>picture</td> </tr> <tr> <td colspan="2">text end</td> </tr> </table Hey, this is my first post to the forum so sorry if it's in the wrong section. I've got a blog on Tumblr (http://matt-kneale.tumblr.com) and I'm want to put some 16x16px icons down the right border of the main box, linking to different sites like my Facebook, Twitter, etc. etc. Any idea how I can do this? I don't know how to make the images float in the right place, then link them without borders. Can anyone help with this? Cheers! Hello! I use coffecup web jukbox on my site. How can I set it so that the player bar floats between pages as the viewer browses my site. At the moment each page has the code to show the player but each time you leave a page you have to start the music track again. Any help would be much appreciated Thanks Mark I'm having trouble with elements overlapping in both IE 6 and 7. I took my code and broke it down to a very simple form to demonstrate the problem. I'm using the liquid/fixed layout found here http://blog.html.it/layoutgala/LayoutGala23.html So my major content area is liquid, with a fixed width sidebar on the right. Where I start to run into trouble is when I put any floated elements inside my content area. As I lessen the width of my browser window the white boxes in my code should bump down one at a time once the sidebar starts to fill their space but in IE the sidebar floats overtop of the white boxes. Here's a screen cap. http://kurtcruse.com/IEbug.gif and here's the code <style type="text/css" /> #FCholder { width: 100%; border: 1px solid red; } #FCwrapper { float: left; width: 100%; background: blue; } #FCcontent { margin: 0 141px 0 0; background: green; } #FCbuttonHolder { float: left; width: 141px; margin-left: -141px; background: yellow; } </style> <div id="FCholder"> <div id="FCwrapper"> <div id="FCcontent"> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> <div style="width: 200px; height: 100px; background: white; float: left; margin: 10px;"></div> </div> </div> <div id="FCbuttonHolder"> Sample text Sample text Sample text Sample text Sample text Sample text Sample </div> </div> Hi I have a requirement. i have an image with float:left style. I have a text following that and an line just below the text spanning entire width of column(not just width of text). I tried 2 ways of displaying it, but the underline was displaying below the floated image not just below the text. Can you please help me here? Two ways 1) Image: float:left, Text and <HR> 2)Image:float:left, Text and dot image spanning entire width of column and height 1 pixel Thanks rakesh http://atomicwm.50webs.com/index.html I started my website yesterday but this is only my 2nd time making a layout. I want to make the dog's paws go over the text in the box when it reaches that far. I have a separate, transparent picture of the dog saved, but I don't know how to put it up/position it. Can someone help me? Sorry that I didn't explain this very well. I am trying to make an image stay at the bottom of a column, no matter how long the column is on each page of my site: http://musicalmadness.atspace.com/ The green bar on the left is the column I am referring to. The image I want to float on the bottom of the column is the parenthesis facing upward, the second in the column. Does anyone have any ideas on how I can get it to always appear at the bottom of the green column no matter how long the page is for each page of my site? Thank you. Hello My name is Beth. I was given the difficult task of creating a website for a company I work very close with and I'm running into all sorts of coding problems. I know these can't be that insane but I've been spinning my wheels on these issues for 2 weeks now and I'm almost out of time. I know it's not much but I will paypal $50 to the person that solves my problem (that is if its not against board policy) i just NEED help so bad! Here is where my demo page is for the new website. It's one page, no links to anything else... URL: http://www.srh.com/taxgirl/index.htm The page is supposed to look kinda link this... The problems a 1.) The drop down navigation has issues displaying over the flash animation sometimes flashing above it but it seems like it naturally wants to be below it. 2.) When you hoover over the navigation the buttons disappear, this might be due to the same problem as #1 but I don't know... 3.) the two columns need to fill down as either one has content. what i mean by this is that if the column on the right has 800pxs of content and the left only has 300px it should still extend 100% with the growth of the right column. Any advice anyone has on this kind of layout I would appreciate massively.. but honestly, I'm so out of time I'd absolutely be ecstatic over a solution. Like I said, I have $50 to offer for help. Please look into your hearts and minds to help! Thank you so so much. ~beth. Hi gang, Have an interesting XHTML/CSS problem - I may be missing something simple, but it's had me stumped for 40 minutes. Much appreciation (and a paypalled bottle of beer if requested ;-) ) to anyone who can solve in Firefox, IE6 and IE7. ------------------ I have a div, called "logobox", centered in the middle of the page. "Logobox" will have 1-4 "logo" elements inside. The logobox is 160px wide & the logos are 80px each, floated left. So if there are 2 logos, they appear alongside each other in 1 row. If there are 4 logos, they are aligned 2x2 alongside each other. This behaviour needs to stay. Here's the problem: If there are 3 logos (or 1 logo), the 3rd logo needs to be *centered* within logobox, not floated to the left/right. So, if there are 3 logos for example, here's the desired layout: -------------Logo Box--------------------- | Logo Logo | | | | Logo | ---------------------------------------------- And here's the current layout: -------------Logo Box--------------------- | Logo Logo | | | | Logo | -------------------------------------------- XHTML/CSS solutions only - server-side processing not allowed as the html is XML-->XSLT generated; JavaScript solutions not allowed because styling with JS is evil. :-) Current HTML: <div id="logobox"> <div class="logo"><img alt="(logoname)" src="images/logo1.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo2.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo3.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo4.jpg"/></div> </div> Current CSS: #logobox { clear:both; margin:13px auto 10px; text-align:center; width:160px; } .logo { background:#FFFFFF none repeat scroll 0 0; border:5px solid #FFFFFF; float:left; height:30px; text-align:center; width:70px; } Cheers, - SuperGrover Hi, How to make an image to float over other image? im having an issue with this code im trying to get going in my css file... i put in the code below in the .css file and call the file in hte header using the link to my css file and then i use the command that should activate the script im wondering if im doing something wrong that maby i dont see, because when i put hte code directly in the header and call it it works perfectly... call :: <link rel="stylesheet" type="text/css" href="MyStyle.css" /> .css function :: .hr2 { border: 0; color: limegreen; background-color: limegreen; height: 2px; border-top:1px; border-style: solid; } Action :: <hr class=hr2> am i using the right way t o call the .css ? should i have more code in my .css to close it off properlly? |
|||||||