|
HTML - Right Float Alignment
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? 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. 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. 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. 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 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>
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 I have a div which contains a line of text as a url. When clicked, a div is displayed directly below, and the content is different depending on the user. Currently, the div opens and two left hand sides align. I would like to cause the right hand sides to align instead, with the divs growing to the left if the text is larger. Is this possible? Hope someone can suggest something. I am working with a programme that uses three templates to structure the web site, feeds articles, author page and site map on a daily basis to my web site. I attempted to insert Adsense ad units to templates and unfortunately everything is out of line now. this can be viewed at http://daviddutch.com/currency/articles/index.html Question is how do I bring everything else back in line please as when I look at coding there is no clear place to put the adsense HTML code to get things lined up correctly. Hope someone can offer wisdom and guidance. cheers Good morning, I cannot figure out how to get the images one on top of the other (in a straight line) here http://divamaggie.com/?p=60 . I tried Code: <br>, <p> and simply line spaces, but nothing seems to be working. I'm really hoping someone can tell me what I'm doing wrong. It's not that huge of a deal because its only an under construction page... but I'd like to know how to get this page looking the same in both IE and Firefox. The only real issues with IE right now is that the image isn't centered and the yellow tape bg is 1px off from where it should be... thanks for any help! http://www.pzfantasyfootball.com Code: <html>
<head>
<title>PZ Fantasy Football » Under Construction</title>
<style type="text/css">
* {margin: 0; padding:0;}
p {margin-top: 15px;}
h2 {font-size: 25px; border-bottom: 1px solid #fff; margin-bottom: 10px;}
body {
background-image: url(images/Metal_Texture-PhotoshopTower.jpg);
background-color: #000;
color: #fff;
font-family: calibri, arial, verdana;
}
a, a:visited, a:active {color: #09f;}
a:hover {color: #06c;}
#wrap {
width: 800px;
margin: 0 auto;
}
.yellowtape {
position: absolute;
bottom: 0;
width: 100%;
height: 524px;
background-image: url(images/yellowtapebg.gif);
background-repeat: repeat-x;
}
.construction {
position: absolute;
bottom:0;
background-image: url(images/pzfantasyfootballunderconstruction.jpg);
width: 800px;
height: 600px;
}
.text {
position: relative;
left: 300px;
top: 225px;
width: 500px;
font-size: 18px;
text-align: left;
}
</style>
</head>
<body>
<div class="yellowtape"></div>
<div id="wrap">
<div class="construction">
<div class="text"><h2>11/1/07 » Site Under Construction Again</h2>Well once again we enter construction mode. I just wasn't feeling the league site, no one really used it much, it didn't have much content that Yahoo! couldn't already offer, and it just really ended up being a waste of time. So now I'm going to give it a shot with a fantasy help site. I know I've done this before, but my future may hold something in the sports industry, so now I look to try and establish a well read site in order to help achieve my goals. I'm not 100% sure if the new site will be done before the end of this season, however it should be done in time for the 2008 NFL Draft. Hope to see you all soon!
<p />Oh, and feel free to contact me via the forums <a href="http://www.pzfantasyfootball.com/forums">here</a>.
</div>
</div></body>
</html>
Hi, I am trying to figure out how I can align text with an image using spacing (strictly HTML). I have applied the vspace and hspace tags to my image, but then my image won't be aligned flush with the text. Is there any way I can set up spacing on just one side of the image? Hi there. I use the following code to show a swf file and align it vertically and horizontically but i can do only the horizontal alignment. Any help about the vertical? Thanks in advance 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" lang="en" xml:lang="en">
<head>
<title>Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" />
<style type="text/css" media="screen">
body { margin:0; text-align:center; }
div#content { text-align:center; vertical-align:middle;}
object#content { display:inline; vertical-align:middle;}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("main.swf", "myContent", "1400", "910", "9.0.0");
</script>
</head>
<body>
<div style="vertical-align:middle">
<div id="myContent" style="vertical-align:middle"></div>
</div>
</body>
</html>
hey guys im getting a weird b0rder ar0und my <div>, i d0nt kn0w what it is..can anyb0dy help me please? ive been l00king at div pr0perties but i havent been able t0 eliminate that b0rder - im n0t even sure its fr0m the div but i'd think it is. the b0rder im talking ab0ut is the black 0ne. c0me t0 think 0f it.. its n0t a b0rder - the black secti0n is a <th> and the black is its backgr0und, but the <div> inside the <th> simply d0esnt extend in it t0 100% :/ http://www.hotlinkfiles.com/files/57...cument_7_.html I don't understand! On my end when I upload it to the server and open an html file in the browser, everything looks fine. But when other people look at the site, it looks totally different. Text boxes are disgusting, I use CSS positioning and it puts everything totally off of the layout. Hi All, I am pulling some data from MySQL and i need to display on screen with Left / Right Alignment. For The example <table width="85%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> Now here i am looking if database-loc = left the data will go left side else it will go right side.\ pulling data from DB is okay with me. Now i am looking some idea how to format div so it shuld set accordingly. Currenly i tried the below but all go to the left. <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> It is going in right side but it is down of left <div> it must go to the top with right direction some thing like valign="top" </td> </tr> </table> I hope i explain it well, i am sorry for my language. Hi Guys Here is some css I use for my footer, I want it to be centered but only span 98% of the distance, however when I change the width to 98% it only cuts off the 2% from the right hand side and justifies the footer to the left. Any Help? Thanks Code: #footer{
clear: left;
width: 100%;
background: white;
color: black;
text-align: center;
padding: 2px 0;
}
Hey all, Just a question about my amature portfilio site that im creating. On some pages, graphics and blog, for example, http://www.freewebs.com/breakdowninc.../graphics.html http://www.freewebs.com/breakdowninc/pages/blog.html I am wanting to center the graphics/blog parts overhead of the copywrite text, found at the bottom of my page. Example: I have centered the graphics images, using align="center" yet they go off the side slightly. Anyway can how can I align them appropriately, without using "position:absolute" because it screws with the mini/maximising of my page. Cheers |
|||||||