|
HTML - Floating Divs
Hello, I've came here because I am really stuck on this one problem... I can't float another DIV right so it's beside another DIV. ( http://www.lentonent.com )
Please could you fix this source code so one div is on the left and one is on the right and they both have a background of middle.png: Code: <html>
<head>
<style>
#middle
{
width: 900px;
background: url(images/middle.png) repeat-y;
}
#middle-left
{
width: 580px;
padding: 25px;
border: 1px solid #000;
}
#middle-right
{
width: 200px;
padding: 25px;
border: 1px solid #000;
float: right;
}
</style>
</head>
<body>
<div id="middle">
<div id="middle-left">
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
</div>
<div id="middle-right">
<h1>Test</h1>
<p>This is a test.</p>
</div>
</div>
</body>
</html>
Thankyou very much for your help! Similar TutorialsHi, first question as a new user so here goes... As part of a website I'm designing I'm trying to create a fairly simple layout with two DIVs, one for an image and one for text, like in the picture below: http://www.eastwood6.co.uk/layout.gif I'm having problems getting the second smaller DIV (the one with the text in) to stay to the right of the first smaller DIV (with the image). I have floated the first DIV to the left, but I found that the text wraps underneath the image when the text is longer than the image. I tried floating the second DIV to the left as well, and this worked fine in IE, but it causes problems in Firefox, namely that the entire second DIV is pushed below the first. I've been messing with this all morning and just cannot solve it, any help would be greatly appreciated! Here's the code I've been playing with: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#one {
width:50%;
border: 1px solid black;
}
#two {
float: left;
border: 1px solid orange;
}
#three {
width: 400px;
}
</style>
</head>
<body>
<div id="one">
<div id="two">This is the left box</div>
<div id="three">This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.
This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.
This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.</div>
</div>
<div style="clear: both;"><p> </p></div>
</body>
</html>
Thanks, Pete Hi, I am trying to make a weblayout with a table. In the first cell of the table, I want to have 6 news items. I want the 6 news items to auto arange on screen depending on the width of the users screen. Well I got it to work, but I can not get the 6 news items to center. In stead they are all aligned to the left leaving an ugly white space on the right. I suppoce its not possible to use <DIV> with float left AND then trying to center it in the cell. Any ideas how to do this? Here is what I got so far. HTML Code: <table style="width: 100%" border="0" cellspacing="3" cellpadding="3"> <tr> <td> <table width="100%" border="1"> <tr> <td colspan="2" align=center> <table><tr><td>I stay centered</td></tr></table> <table><tr><td>I dont and neither does the divs below :( <div style="float:LEFT;width:360;BACKGROUND:RED;"> AAAAAAAAAAA </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> BBBBBBBBBBBBBBBBBBBB </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> CCCCCCCCCCCCCCCCCCCC </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> DDDDDDDDDDDDDDDDDDDD </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> EEEEEEEEEEEEEEEEEEEE </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> FFFFFFFFFFFFFFFFFFFFFFF </div> </td></tr></table> </td> </tr> <tr> <td valign="top" width="50%"> GGGGGGGGGGGGGGGGGGGGGGG </td> <td valign="top" width="50%"> HHHHHHHHHHHHHHHHHHHHHHHHHH </td> </tr> <tr> <td colspan="2" valign="top"> IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII </td> </tr> <tr> <td valign="top" width="50%"> JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ </td> <td valign="top" width="50%"> KKKKKKKKKKKKKKKKKKKKKKKK </td> </tr> </table> </td> <td valign="top" width="320px"> LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL </td> </tr> </table> Hi there i am trying to center align and image and text as well as float the text to the left of the image. It seems I can only manage to do one or the other, the code below floats the text to the left of the image, but the two elements sit to the left on page. How can i center this? HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <center> <div id="spacer"></div> <div id="header"></div> <div class="row"> <div class="left"> <img src="ripple.jpg"/> </div> <div class="right"> <p class="bio">After leaving school I studied graphic design at Kingsway College of Art in London. During this time I learned the basics of the profession.</p> </div> </div> <ul id="minitabs"> <li><a href="Home.html">Home</a></li> <li><a href="Biography.html">Biography</a></li> <li><a href="Portfolio.html">Portfolio</a></li> <li><a href="Contact.html">Contact</a></li> <li><a href="About.html">Links</a></li> </ul> <div id="underline"></div> </center> </body> </html> CSS: Code: row { position: center; width: 800px;}
.left { width:400px; height: 330px; float: left; }
.right { width: 400px; height: 330px; float: left; }
#spacer {
width:800px;
height:12px;
background-color: #3366ff;
}
#header {
position:center;
width:800px;
height:75px;
background-image:url('images/portfolio.gif');
background-repeat:no-repeat;
}
/* Styles for nav bar */
#minitabs {
clear: both;
padding: 25px 0 14px 10px;
width: 800px;
}
#minitabs li{
margin-left: 0px;
padding: 0px;
display: inline;
list-style: none;
}
#minitabs a{
line-height: 14px;
font-weight: bold;
font-family: verdana;
margin: 0 10px 4px 0px;
text-decoration: none;
color: #777777;
}
#minitabs a.active,
#minitabs a:hover {
border-bottom: 10px solid #3366ff;
font-weight: bold;
padding-bottom: 5px;
color #ff6600;
}
/* Styles for images on Portfolio page */
#images1 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images1 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#images2 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images2 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#underline {
margin: -16px 100px;
width: 800px;
border-bottom: 1px solid;
color: #777777;
}
p.bio {
text-align: center;
width:500px;
font-family: verdana;
}
Any suggestions? Thank you Jackie Hey, Ive seen this done a few times and i was wondering if aqnyone knoew how hard it is or how to achieve it. When the user clicks on a button i want either an image or text to appear next to it. Im sorry i cant find any examples but i have seen it done in places. Thanks, Ben Hi everyone, Me again I'm afraid. Hope you had a good Christmas and New Year. I have a question regarding the following page: http://www.dynamic-xchange.com/resources.php I am trying to update it as I have done with the others (http://www.dynamic-xchange.com/index.php) and implement XHTML and CSS but I am having problems floating the divs correctly to get the desired effect as in the page given above. Any help of advice would be very welcome as I am tearing my hair out. Warm regards, Simon Hi all, Sure glad I found this site!, I would like to ask for some advice please guys I have a portal that uses a portal stylesheet, the header is a .png image and needs to be 100% width, this loads from a Content Web File Manager, it carries a logo on the left and some corperate colour bands, it appears on every page of the portal, the right side is blank apart from the picture of a search box ( it shipped with the png I will be getting rid of this using PSP) I have created a <div> content </div> and I want this to appear to the right and in front of the header in place of this search box The <div> loads fine on templates (the dynamic content of the portal these are templates that the site use) so I know this works fine, now i want to make it appear on the header itself in place of the picture of the search box that I have erased This is where I am getting stuck - I do want it to be a permanent feature on the header and to the right, what do I need to use in the html code before and after the <div> content </div> ? All help will be greatly appreciated John Prevous title: (div in div top:0; left:0; = top corner of first div, not page...) Ok, here's the code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV DIV</title>
<style type="text/css">
<!--
#apDiv1 {position:absolute;top:0;left:0;width:150px;height:150px;z-index:0;background-color:#00F;}
#apDiv2 {position:absolute;top:100px;left:100px;width:200px;height:200px;z-index:1;background-color:#F00;}
-->
</style>
</head>
<body>
<div id="apDiv1"></div>
<div id="apDiv2"> </div>
</body>
</html>
Which produces: However, the "problem" is that i would like that result with this variation on the code: HTML Code: <div id="apDiv2"> <div id="apDiv1"></div> </div> But that "unfortunately" returns this result: Which was great when I first did it, (i always thought top:0; left:0; would put a div in the top corner of the page regardless of where it is within the code... so when i tried it in my last project and it used the top corner of the containing div as 0,0 that was exactly what i needed) but in my current project, I really need div1 to go to the top corner of the page, not div2, but still reside inside of div2... is this possible? can anybody please help with this html document, i need to have all the picturecs in the right places.. i cant seen to figure it out, i will only take a minut for someone who know what to do ! http://peecee.dk/upload/view/174763 How do I make text appear above lowercase characters? Hi, How can I get my jquery gallery to appear in the center and the columns on the side to auto fit around it? The gallery is currently hanging over the right column. http://elitedonuts.com/float3.html THX! http://tinypic.com/r/1t4igj/5 How can I make a floating social media sidebar like this one? okay guys so i made a theme and here's the out come ( i wont make it appear because its so big ) http://i.imgur.com/LyM41.png but i want to put an i frame on the middle part like this http://i.imgur.com/Fw6fP.png w/ transparency but still the image is still there so it will look like this http://i.imgur.com/CUP1k.png can any one help me with the code? http://i.imgur.com/t9zrr.png i have a iframe code im using to run a scrolling text, im wondering if i can get the iframe to float on the right side of the screen... i tried adding stye="float: right but it didnt work heres the code im using below and you can see a preview of the outcome at http://www.freewebs.com/fallingrain11/test2.htm document.write('<iframe id="datamain" src="'+iframesrc+'" width="165px" height="215px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"; style="float: right></iframe>') Hello, I am trying to create a web page, and, currently, there is text at the top, and text at the bottom displaying copyright information and useful links. I am aiming to have this page fit into one page, without the need for scrolling, with an iframe in the middle. (So the user is not taken away from the page to complete the task). However, I have the text at the top, the iframe set to 78%, and useful links at the bottom. It works in most browsers without needing to scroll, however, when you use the page in IE, you need to scroll to see the very last bit. Is there a way, I could "float" a section at the bottom of the page, so it doesn't disappear? I am looking to put a floating menu on the right and a floating facebook box on the left side of my website. Can someone help me by telling me how to do one or both of these things. or.. Can some help me by telling me where to go to find out how to do it? Thanks ! Hello please see http://www.view-agency.com/view/Repr...x?Id=243&Cat=2 in all the RepresentedEng.aspx The .main_wrap class floats to the right, although it's inside a class that has same width and margin auto ... anyone ? ? What's even wierder is that on http://www.view-agency.com/view/Cate...Eng.aspx?cat=2 for instance, there is no floating problem although it's supposed to work on same css.... Comment - Don't bother explaning to me that it's not valid and code isn't 100% right because I didn't make it, and it ain't possible to make the site all over. I'm sure there's a way to fix this tiny problem.. Thanks !!!!! I am making a website using Dreamweaver CS3. I am actually making a template page that contains 3 columns with a header and footer. I want to make the height of the left and right columns float to match the length of the center column. The center column will always contain more content than the side columns. The code for the left column is below: .thrColAbsHdr #sidebar1 { position: absolute; top: 120px; left: 0; width: 160px; background: #fff9d9; padding: 5px 5px 5px 5px; Any input would be helpful. Thank you EDIT: Problem Solved. Thank You. This might be the first of a number of posts that I'll need to make as I'm not a web coder by any means but I do at least understand the basics. I'm developing a fairly simple five page website and may come across further problems as I go. Click here to see the main page as it currently stands. I've got two problems. Firstly and most importantly, how do I get #beercards to line up with the same line as "Your ticket includes"? #beercards is floated to the right, which I thought would take care of everything but apparently not. I don't mind which way I set it up (either in DIVs or just normal text), as long as those titles are in line with each other. Secondly, I added @font-face to the CSS and whilst working on it offline, it worked fine. When I uploaded everything in preparation to making this post, I realised it was no longer working. Can you tell me why this is please? Thanks for the help! Hey everyone. I'm working on a Wordpress template and have a question. I have a div #header and the corresponding CSS defines a background image. All good. What I want to do is put some image/links (i.e. a picture that says HOME that is hyperlinked to the hope page) inside this div. Using simple <a> tags I can achieve this: Code: <a href="www.google.com"><img scr="mypicture"></a> . This naturally puts my picture-link at the top left of the header div. I want this picture-link to be moved to the right maybe 25 pixels, moved down 20 pixels, etc. How can I acheive this? I tried replacing the <a href="www.google.com"><img src="mypicture"></a> with this: Code: <div style=”top: 20px; right: 25px; position: fixed;”><a href=”www.google.com”><img style=”border:0;” src=”mypicture” alt=”home” width=”140″ height=”40″ /></div> I found that on Google and thought it might work, but I have no success. Do I need to use CSS for this? And how exactly would I do that? Can anybody give me a good detailed explanation on how I can go about doing what I want? Help would really be appreciated! Thanks! |
|||||||