|
CSS - Positioning Floats Next To Text.
Hi Guys,
Basically, I have Text in a content box, all fine and dandy, this content box has a fixed width and an expanding height depending on supplied content. I now need 2 further divs, one of which floats to the right, and positioned at the top of this content div, the other also floats right but needs to be alligned bottom. Ive tried absolutes with content being relative but although this does solve the positioning problem, obviously the content text will not wrap around the divs. ------------| ------------| ------------|_______| --------------------------- ------------------ ---------------------- ---------------------------- ------------------------ -----------| -----------| -----------| -----------|_______________| Basicaally like above (sorry, cant screenshot the project im working on :]) Code: <div style="width:591px; position:relative; z-index:1;"> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:291px; height:100px; float:left;"> asfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj k </div> <div class="clear"></div> </div> Similar Tutorialshttp://62.190.48.108/intertest/news.php Basically, I want to sort out the header on the box just below the filter button. I want to get the date to stop where it is now, move where it says test to the center of the bar, and the print floated item to the far right. I am floating three elements id's .news_date, .news_headline and .news_print, but .news_print squashes .news_headline down, and I cant seem to change the width (The element needs to only be as big as the workd PRINT). Any ideas Thanks in advance. Joel I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. i am making this page... T10L New and on the page, i am trying to float the right column on the right... like it is.. but problem is, when the text on the left continues past the right column, it isnt wrapping... like on this page... T10L Old i know it is because i have a width set on the "maincontainer" div... which is the left side, but if i dont do this, the right div will just be pushed to the bottom... any help or suggestions would be great... I have floating items inside of floating items. The problem is I cannot clear my floating items in the middle column because that ruins the other columns. How can I clear floats in the middle column? Do you have any better ideas to make my layout work? I have attached in image of how the layout should work. 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>Title</title>
<style type="text/css">
#content {
display: block;
margin: 0 5px;
padding: 0 10px;
border-top: 1px solid #0B4867;
}
.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .25%;
display: inline;
background: #ffeeee;
}
.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}
.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}
</style>
</head>
<body>
<div id="content">
<div style="margin: 0px 215px; padding: 0px; border: 0px; display: block;">
<div class="content100">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra malesuada turpis. Sed iaculis justo sed turpis. Nulla malesuada turpis sed nibh. Mauris dui quam, cursus at, sollicitudin a, auctor quis, ligula. Vivamus varius blandit velit. Sed eu nibh. Vestibulum sit amet massa. Maecenas elementum massa ac ligula. In vitae massa ut dui facilisis lacinia. Maecenas tristique pede in elit. Duis ultricies aliquam metus. Mauris neque. Nunc nec lectus eu metus rhoncus imperdiet. Etiam egestas semper nunc. Nunc pretium tincidunt felis.
</div>
<div class="content50">
<h2>Row 1, Column 1</h2>
In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque.
</div>
<div class="content50">
<h2>Row 1, Column 2</h2>
This column is not very high.
</div>
<div class="content100">
Donec sed velit mollis erat consequat ornare. Donec accumsan, sapien a posuere tristique, felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 1</h2>
Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 2</h2>
This column is not as high as the previous one.
</div>
<div class="content33">
<h2>Row 2 Column 3</h2>
</div>
<div class="content100">
Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante.
</div>
</div>
</div>
</body>
</html>
So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div. But, these 2 divs have to unordered lists in them. I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths.. Screen shot of how my layout looks. img209.imageshack.us/img209/2913/idear.gif I did not add any clear tags to my css.. which I think might be what's causing the issue. Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns. I didn't do anything with the unordered lists. Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works. Thanks for helping me out! BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer. Thanks again. Hi Basically i have positioned some text on my site in the place i need, and it looks fine while the browser is maximised. But when i resize, the text moves to accommodate. Is there anyway i can have the text in the right place, but not move when the browser is resized? Thanks this is the first time im making a CSS website. w3schools.com really is a big help, but i came upon a problem. on the layout, on the upper left, i got my main menu. i positioned some text there with this code in <head> Quote: h1 { position: relative; top: 46px; left: 135px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; } h2 { position: absolute; top: 63px; left: 135px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; } ( as u can see, i tried "relative" but it doesnt work ) and then typed the links of the menu like this: Quote: <h1><a href="index.html">Home</a></h1> <h2><a href="aboutus.html">About Us</a></h2> ect. but when i rezise the browser or take a different resolution, then the text also moves along. the text doenst stay on its place on the menu. for example, if i make the length of the browser smaller, then the text moves out of the menubox, to the right. i hope u understand this. how can i make sure that the text will always stay on its place, on every browser size/resolution? Hi, I am having a problem with positioning of text within a div. The CSS for my div is: #menuItem { background-image: url('../../images/menu_bg_off.jpg'); width: 146px; height: 28px; font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; background-repeat: no-repeat; } <div id="menuItem"><img src="images/spacer.gif" width="33" height="1" /><a href="">Home</a></div> The problem lies in getting the text to appear in the middle of the div. I've tried using padding-top: to nudge it down a bit, but that extends the height of the div.. which I don't want to happen. I have a bunch of these lined up vertically (forming a menu) and I don't want any space between them. margin-top: also adds this unwanted space. As you can see I'm using a transparent spacer image to nudge the text horizontally to where I need it to appear, which works. My question is.. how do I position the text vertically to where I want it to appear inside the div? Hello all, My second post . I have a div box with text in it. It looks fine in ie, but the text drops when viewed in mozilla. I have highlighted the border for clarity and want the text to remain directly underneath. I have tried adding styles to mainsection, the div in question, and also the p text attribute, with no joy. As with my last problem I am sure the solution is a simple style, but I can't find it. Any help would be much appreciated. thanks Solar. html page: http://darkspeed.atspace.com/Textest.htm CSS link: http://darkspeed.atspace.com/txtstyle.css thanks again. hey all, i'm trying to figure out how to position text in an h1 tag that uses a background image, without adding extra markup. i just need it 15px from the left of the image, and 10px from the top. here's the css for the h1 tag: Code:
h1 {
height:50px;
width:100%;
background:white url(images/h1_background.gif) no-repeat left;
margin-top:12px;
color:white;
font-size:11pt;
}
and the html is just; Code: <h1>welcome</h1> thanks! I'm trying to position some things inside a DIV. Here's the basic layout: What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong. Image One is easy, but the text and Image Two I just don't seem to grasping. I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there. Should the text block and Image Two be within a separate DIV? Hello, If you go to http://tombraiders.net/katie/sid/index.html User: letme Pass: in you'll see that the body text is shifted halfway down the page as well as the menu. Anyone know how I can fix this? Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long. Thanks! Hi, I've recently built my first site using the Magento eccomerce paltform. I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area. This only happens in IE. I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it. Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page. Thanks, Tim I'm pretty new to CSS so bear with me if this is a silly question. I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right. The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly. What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat? My problem is with 2 textfields that I am using css to text attributes, all is well in IE, but in netscape and firefox the letters q,y,p the bottoms get cut off. Any suggestions greatly appreciated. here is a link to the page i am working on http://www.cfwilson.com/365c/index.htm Charles Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following. I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell. But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below: |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other. Hi, I have a table cell where I have to place an image and title (centered) by the side of it. I am using the following code but does not work the way I wanted. <table> <tr> <td> <img src="graphics/gifs/spotlight_xlr.gif"> Title </td> </tr> </table> The "Title" text is getting displayed by the side of the image but to the bottom. I want the Text to be centered around the image. Both the IMG and Text should be part of the same TD tag. I know with CSS it is possible. Please help. Thanks, VMRao Hi Guys, Ive not been doing the CSS stuff too long as I used to use tables all the time for this stuff. Im ultimately trying to get 3 news articles for eg on a homepage with a mini image to the left of the text which wraps around it. The text sometimes is not going to be the size of the image so the next article needs to drop to the next line underneath. It isnt though and its listing in a diagonal line instead. Any one got any tips. Code: <div id="m1"> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p><img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" />Latest shinanigans on the money savings scene today are... just gonna pack this out to see if the image does eventually fit in at all which would be nice because it should work! But who knows eh? :D Its just an interesting topic to look into la de dah de dah!</p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> </div> Ive tried a few things like putting div's around each specific article see if i could somehow force it to a new line but it isnt working. The img tags ive moved about. Im using float left on them. Any one any suggestions? Im really stumped and close to hitting the monitor If it helps I could pm the url to you if you think u can help. Thanks guys. Im hoping this is a relatively easy problem as most sites layout like this just I can't get it to do it! hehe! Hi, Here is the problem I'm having: This: see attached cssprobl.jpg should become: http://www.thephotofactory.nl/csstest/cssprobl-goal.jpg Here's the CSS code I have: Code:
body{
background-color: #FFFFCC;
margin: 0px;
padding: 0px;
}
.holder{
background-color: red;
width: 250px;
height: 400px;
float: left;
margin: 10px 10px;
}
.img{
padding: 0px;
width: 200px;
height: 200px;
margin: 20px 10% 0px 10% ;
border: 2px white solid;
}
h1{
font: 35px Arial, Helvetia, sans-serif;
color: white;
text-align: center;
margin-top: 10px;
}
.omschrijving{
background-color: grey;
font: 15px Arial, Helvetia, sans-serif;
text-align: left;
margin-top: 10px;
padding: 5px;
}
.prijs{
font: 25px Arial, Helvetia, sans-serif;
color: white;
text-align: center;
margin-top: 10px;
}
.dec{
vertical-align: super;
font: 14px Arial, Helvetia, sans-serif;
color: white;
}
.euro{
font: 14px Arial, Helvetia, sans-serif;
color: white;
}
.omschrijvingholder{
background-color: black;
width: 250px;
height: 100px;
margin-top: 0px;
}
.prijsholder{
background-color: green;
width: 80px;
height: 40px;
vertical-align: bottom;
float: right;
}
and this is one of the sections: Code: <div class="holder"> <h1>Theeglas </h1> <div class="img"> <img src="theeglas.jpg" alt="theeglas met bedrukking" title="theeglas met bedrukking" width=200 height=200></img> </div> <div class="omschrijvingholder"> <div class="omschrijving"> Een mooi theeglas met een doorzichtige bedrukking. </div> <div class="prijsholder"> <div class="prijs"> <span class="euro">€</span> 9,<span class="dec">95</span> </div> </div> </div> </div> SO: how do I get that green part exactly there (and without going outside the red box), and how do I wrap the text in the grey part around it? After 2 hours of trying all kinds of options I give up and call for help Here is the full link: http://www.thephotofactory.nl/csstest/valentijn.htm Second problem: in IE the white border around the img is too low, leaving a red space. How to avoid that? Thanks in advance, Papermouse PS How do I put an uploaded image in this message? Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages. The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway. I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful. Edit: I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side. |
|||||||