|
CSS - Stupid Floats And The Div That Surrounds It.
I'm trying to set up a 3 column template using div tags. I have the floats working quite well, but the floats need to be in a larger div tag (id = siteContent) that has a background color surrounding the site so it creates a padding of color. I can't get that to work. As soon as I set the float the columns are taken out.
I pulled out the relevant ID styles for each div tag. Code: <div id="siteContent"> <div id="mainContent"> <!--- Header ---> <div id="headerArea"> <div id="orangeNav"></div> </div> <!--- 3 columns ---> <div> <div id="leftSide" style="float: left; width: 160px;">left</div> <div id="centerSideFull" style="float: left;width: 390px;">center</div> <div id="rightSide" style="float: left;width: 160px;">right</div> </div> </div> <div id="bottomNav" style="clear: both;"></div> <div id="footer" style="clear: both;"></div> </div> Similar Tutorialsi hate floats. why are they so tempramental! i want to avoid using tables for layout as much as i can within reason... but sometimes it's really difficult! all i want is for the text to be on the left, and the form table on the right. instead they touch on the corners, or on top of eachother, or anything except what i want. here is the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Effing Floats!!!!!
</title>
<style type="text/css">
.signupform{
width:500px;
border: dashed green 1px;
}
.formtext{
float:left;
width:100px;
border: dotted orange 1px;
}
.formtable{
float:right;
width:400px;
border: double yellow 1px;
}
</style>
</head>
<body>
<div class="signupform">
<p class="formtext">Your email address and personal information are confidential and will not be sold or rented. See our <a href="#">Privacy Policy</a> for more details. By clicking Continue, you agree to the <a href="#">Terms of Service</a>.</p>
<form method=post action="#" name="signup">
<table class="formtable">
<tr>
<td class="label">First Name:</td>
<td class="label">Last Name:</td>
</tr><tr>
<td class="textfield"> <input type="text" id="firstName" name="firstName" value="" size="15"> </td>
<td class="textfield"> <input type="text" id="lastName" name="lastName" value="" size="15"> </td>
</tr><tr>
<td class="label">Email Address:</td>
<td class="label">Re-Type Email Address:</td>
</tr><tr>
<td class="textfield"> <input type="text" id="email" name="email" value="" size="15"> </td>
<td class="textfield"> <input type="text" id="emailConfirm" name="emailConfirm" value="" size="15"> </td>
</tr><tr>
<td class="submit" colspan="4"><input type=submit value="Continue" class="button"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
(ps: if you are going to tell me not to use a table to format my form elements, then i welcome your solution to get it to look the way i need it to without a table) --edit-- ok, sorry, i guess the problem was that i hadn't accounted for the 6 extra pixels in width due to the borders i gave it. HOWEVER, i still have the problem that the floats are not expanding the div which they are in. thus, if i put this at the end of a page in a content area that has a border, the border will end before the content does, much to my chagrin! does anyone know how to fix that? 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, Whats going on with my site in FF? It works fine in MAxthon. http://www.wnv2.com/?wn=tutorials&type=photoshop all the tutorials are messed up ==and== www.wnv2.com There is not bottom!!! Thanks at least i think it's a stupid little css problem ... i've attached 3 png's so you can see the problem i'm trying solve. what i'm doing is i have a DIV that holds an icon that's floated to the left and another DIV that houses a message. these two DIV's are then sorrounded by a DIV that's supposed to put a border around everything (the icon and the message). look at the png named "good" ... that looks fine. the text wraps around the floated icon sorta like what you might see in a newspaper, which is the effect that i'm going for. however, when you widden the window you get "no-good." the border that's supposed to go around everything now intersects the icon. now if i had enough text in the message, no matter how wide the window is, the text would always force the border to sorround everything. but i can't always be positive that the amount of text would always match what is needed. now take a look at "fixed.png" ... this is how i would like it to look. the border always sorrouinding everything. now i was under the impression that when a DIV sorrounds another DIV, the outer most DIV takes on the shape of the DIV inside (the basic box object model). this doesn't seem to be the case with a div that's floated though. it always seems to hang outside of the outer most DIV, and i think it's a behavioral issue. my question is: is there a style property that i must invoke on the outer most DIV to make it display this way? or is what i'm attempting to do impossible? i don't think it should be impossible or i would deem that as a drastic flaw in css. i'll also post my code: Code: <div style="border:#ff0000 solid 1px"><!-- full wrapper --> <div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px"><!-- float wrapper --> <div><img alt="image" src="img.bmp"></div> <div style="background-color:#cccccc; margin-top:1px"><!-- caption wrapper --> <div style="text-align:center">caption</div> </div><!-- end caption --> </div><!-- end float --> <div style="background-color:#0000ff"><!-- message area --> <div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div> </div><!-- end message --> </div><!-- end full wrapper --> thanks for any feedback, except telling me that my color scheme is lousy. i'm aware of that; i use high-contrast colors in the implementation phase so i can see exactly what is going on. -z Hello all. I have come across a problem while coding my new design. My site is www.devwebsites.com My code is valid html and css. My site looks perfect in Safari, Chrome, Firefox, and Opera. IE7 however has a weird "bug" type effect on the <h1> in the header div. Part of the text is being cut off. I for the life of me can't figure out what is causing this. Is this a new browser bug or is there something I did not thing of? (I tried z-index, because it seems that the <h1> is stacked underneath another element...it didn't help.) Hope a smartie here can help me out with this one. Thanks. <edit> IE7 also removes the bullets from my <ul>. Any ideas on that also? </edit> Hi im a relative newbie and am having a really annoying and stupid problem. I have a 3 column layout but the 3rd column "rightcolumn" for some reason is in the 2nd column "middlecolumn". It would seem like there's a missing </div> but i can't figure it out. any help would be awesome source: kdpatton.com/test.htm OK so what i'm trying to do, obviously, is create a rounded box. I'm using 6 images and the thing is divided into 3 parts vertically (the top part, the content part and the bottom part). Those parts are divided into 3 parts as well (left corner part, looping background part and right corner part). It works like a charm in real browsers, but IE is screwing things up as always. To simplify things, i'll just illustrate the concept of the top part of the box. Code: <div id="thebox"> <div class="dbtopleft"><div class="dbtopright"><div class="dbtoploop"></div></div></div> </div> So we have a wrapping div that is, let's say, 500 pixels wide and inside we have the top part: topleft div contains a left corner image, topright div contains a right corner image and is padded 25 pixels (the width of the corner) left and right. The middle div (toploop) has a top looping picture and is, obviously, 25 pixels away from each side. Here's css illustrating that: Code:
#thebox {
position: absolute;
left: 500px;
top: 300px;
}
.dbtopleft {
background: url(cb_tl.png) no-repeat;
height: 25px;
}
.dbtopright {
background: url(cb_tr.png) no-repeat top right;
height: 25px;
padding: 0 25px 0 25px;
}
.dbtoploop {
background: url(cb_t.png) repeat-x;
height: 25px;
}
So, as i've already mentioned, this thing works in normal browsers, but in ie it doesn't take the full width of the wrapper div. Instead it displays an ~50px box with both corners and the wrapper is ... well ... 500px. Does someone know of any hack to make this code work in stupid IE? Update: if i specified the width of the wrapper, it would seem to work, but i don't want to do that, since the width may vary. I have this: all my css files in one subdomain, html.website.com all my iamges in another subdomain, images.website.com i link my stylesheet: <link href="http://html.website.com/html/style.css" rel="stylesheet" type="text/css" /> and in the CSS: background:#333 url("../images/bodybg.png") repeat-x fixed top center; does not work. i have to put the whole domain in there? as far as relative paths, since the image is relative from the path of the location of the stylesheet? so I would think ../images/ should work? I am trying to get the logo div to sit on top of the background div with the code before....all I can get the logo to do is sit directly BELOW the header....help! please! PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>golfpeg.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- BODY { background-color: #ffffff; margin: 0px; padding: 0px; } #headerBg { position: relative; top: 0px; left: 0px; background-image: url(/gfx/bg_files/header_bg.gif); width: 760px; height: 102px; z-index: 1; } #logo { position: relative; top: 0px; left: 0px; background-image: url(/gfx/primary_logo.gif); width: 225px; height: 102px; z-index: 2; } --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td width="760"> <div id="headerBg"></div> <div id="logo"></div> </td> <td> </td> </tr> </table> </body> </html> I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? Hi guys, I'm new to CSS so pleaz forgive me if the following questions are stupid. 1/ Let's say we have in traditional HTML this: <img src=".."><font class=""><b>French Jokes</b></font> <br> <img src=".."><font class=""><b>French (Freedom) Fries</b></font> <br> <img src=".."><font class=""><b>F*** Jacques Chirac</b></font> <br> <img src=".."><font class=""><b>A bas la France</b></font> Now how should I write that in plain CSS? (I know I cannot use <b>, nor <font> tags). I suppose the <p> tag, correct? Something like: <img src=".."><p id="cat_title">French Jokes</p> <br> <img src=".."><p id="cat_title">French (Freedom) Fries</p> <br> <img src=".."><p id="cat_title">F*** Jacques Chirac</p> <br> <img src=".."><p id="cat_title">A bas la France</p> My problem with CSS is not the table design with float and so on but rather how to lay out a page combining many fonts (some on the same line), some <b> and some <u>'s, some font tags etc. (should I choose <span> rather than <p>?, <div>, rather than <p>, <b> or <strong>, etc, etc ,etc) Thank you for your help. Cheers Andreas I've got limited experience with CSS and I've never done anything with divs, only tables. So my question is really, really, really basic: Not being as adept at CSS as I could be, especially positioning, I'm sort of at a loss as to how to best structure my page using divs. Looking at the comp at http://homework.describe.org/esdcar_home.jpg, would it be best to make everything from the top to the start of the brown bar at the bottom and from the left to the start of the picture one "column" (with nested divs), with everything to the right of the picture's edge a second "main content" column with nested divs inside it? Or should I make one header div that runs from left to right until either above or below the navigation (?), and everything below that point be a 2-column layout (until the brown bar at the bottom)? Does it matter one way or the other? Will it one day be clear to me immediately exactly how best to divide up and structure a page from a comp? Am I just a confused soul, or does everyone kind of struggle with this at the beginning? Sorry to ask such basic questions, but... Thanks in advance. T. Hi, Here is that affected page: www.wnv2.com/v12.php Look at it in IE and then in FF. Why is it not working in IE? The Code is below! Thanks for anyhelp Code: #navigation {
border-bottom:1px solid #b00000;
width:750px;
height:30px;
margin:0;
}
#navigation a
{
color: #FFF;
background: #b00000;
text-decoration: none;
padding: 0 10px 0;
margin: 5px 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
font: 12px Geneva, Arial, Helvetica, sans-serif;
height:25px;
}
#navigation a
{
display: block;
float: left
}
/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a
{
float: none
}
/* End IE5-Mac hack */
#navigation a:hover
{
color: #b00000;
background: #FFF;
text-decoration: none;
padding: 0 10px 0;
margin: 5px 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
height:25px;
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
display:inline;
}
#navigation li
{
float: left;
margin: 0;
padding: 0;
display:inline;
}
#navigation a:hover, #navigation a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
color: #b00000;
background: #FFF;
text-decoration: none;
padding: 0 10px 0;
margin: 0 5px 0;
border-left:1px solid #b00000;
border-top:1px solid #b00000;
border-right:1px solid #b00000;
height:30px;
}
Hi all, I need to have two CSS stylesheets that change the background color of my page. All I need to know is the CSS code to change the background color. Cheers. Hey, k, as per usual, all's well in FF with this site. The list to the right is forcing the paragraphs below in IE tho...I've tried a bunch of different 'clears' and what not, but can't seem to figure it out. Here's the html; Code:
<div id="homelistbox"><b>Upcoming Tradeshows:</b>
<ul class="homelist">
<li><a href="http://www.torontoinwaterboatshow.com">Toronto In-Water
Boat Show,</a> Sept 14-17 2006</li>
<li><a href="http://www.torontoboatshow.com">Toronto International Boat
Show,</a> Jan. 12-21 2007</li>
<li><a href="http://www.sportsmensshows.com/Ottawa/">Ottawa Boat, Sportsman
and Cottage Show,</a> Feb. 22-25 2007</li>
<li>See the various models of Custom Weld Boats at all these shows.
<a href="contact.php">Contact us</a> for more information about locations
at the shows.</li>
</ul>
</div>
<p> Freedom Boat Sales is committed to bringing Canadian recreational enthusiasts
exciting new and pre-owned products for the water, trail, and road.</p>
<p>Flexibility, great pricing, and innovative products will keep you coming
back for all your recreational needs!</p>
<p>Please be advised that we are currently working to improve your online
experience, so your patience is greatly appreciated!</p>
<div class="clear"></div>
and the CSS; Code:
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
line-height:11pt;
color:#555;
text-decoration:none;
width:650px;
margin-top:5px;
padding:10px;
}
#homelistbox {
width:180px;
padding:5px;
margin:2px 10px;
border-top:1px dotted #CCC;
border-left:1px dotted #CCC;
min-height:120px;
float:right;
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
color:#255CB8;
}
.homelist li {
margin-top:5px;
padding-left:10px;
list-style:none;
}
.homelist a {
color:#FF0000;
text-decoration:underline;
}
.homelist a:hover {
color:#255CBE;
text-decoration:none;
}
i'm also having similar issues with simple image floats, as seen here. It forces the paragraph underneath in IE...boourns. Anyways, any guidance'd be greatly appreciated. Cheers. This may be a stupid question, but I recently noticed something with floats and side by side elements that confuses me. I thought you always had to specify a width when it came to floating elements along side each other, as block level elements inherit 100% width usually. But on the last 2 sites I coded, I was able to float divs without specifying a fixed width. The div boxes only took up the width of there content. Worked in FF, Chrome, Safari, IE7/8. This is great, as it saves time, but makes no sense. Am I confused? Hi All, I am almost tearing he little hair I have left out! I can't get the div in the middle to clear the floats. Works just lovely in FF, but that IE thing won't work!!! Grrree http://www.tuxdiscs.com/sscp7b/ Any advice would be appreciated! Thanks Hello, I'm currently working on a website layout that uses CSS for everything. I have a header, and two columns below that. The header works perfectly. I used float:left on both of my two columns, and they both appear side-by-side as intended. However, I want the right column to fill up the entire right side of the screen. When I try to use CSS's width: 100%; the entire right column jumps down below the left column, which is not what I want. I made a little screenshot: http://img282.echo.cx/img282/6555/tms1od.png I believe it can be done, but I'm stumped. Help is appreciated |
|||||||