|
CSS - Div Not Containing Children Divs
This seems odd to me to even bother putting this up here, as I'm guessing it is a simple fix. I'm familiar with css and html, so I hate to post this, but it is a pressing matter that I'm drawing a blank on.
I'll post the HTML and CSS below, as I don't have a live location I can place it as an example. Hopefully someone will pop open dreamweaver and take a few minutes to help me out The div 'main' contains the divs 'rightColumnPartners' , 'mainContentPartners', and 'leftColumn'. However, main does not push down to contain the content of those children divs. Maybe I'm missing something elementary and simple, but it seems considering main encompasses these divs, it should stretch downways to contain the content within them. Below is the HTML and CSS, again I apologize for not having an example page up, but it is pretty basic and should be easy to visualize. ---------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <link href="main.css" media="all" rel="Stylesheet" type="text/css" /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="keywords" content=""> <meta name="description" content=""> <title>Test</title> </head> <body> <div id="topSection"> </div> <!--close of topSection --> <div id="header"> <div id="mainnavigation"> </div> <!--close of mainnavigation --> </div> <!--close of header --> <div id="main"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <div id="leftColumn"> </div> <!--close of leftColumn --> <div id="rightColumnPartners"> <div id="mainContentPartners"> <h2 class="darkHeader"> Partners </h2><br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> </div><!--close of mainContentPartners --> </div> <!--close of rightColumnPartners --> </div> <!--close of main --> <div id="footer"> </div> <!--close of footer --> </body> </html> ---------------- @charset "UTF-8"; /* CSS Document */ /**********************/ /* CONSISTENCY CODE */ /**********************/ * { margin: 0px; padding: 0px; font-size: 24px; } /**********************/ /* POSITIONING CODE */ /**********************/ #mainnavigation { background: #1E0F08; height: 36px; width: 100%; } body { height:100%; background: url(bg_gradient.jpg) SaddleBrown repeat-x; } #homecontainer { width: 100%; height: 100%; /*height: auto;*/ position:relative; } #topSection { width: 1000px; height: 30px; background: #754221; margin: auto auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; } #header { background: url(header_bg.jpg) repeat-x bottom; height: 123px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; } #titleimage { margin-top: 0px; padding-left:0px; float: left; left: 0; position: absolute; } #main { width: 1000px; /*background: #703b1b;*/ background: red; margin: 0 auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; clear:both; } #leftColumn { width: 20%; margin-left: 0px; position: relative; background: black; height: 100%; height:600px; border-width: medium; border-color: #432306; border-right-style: solid; float: left; } #rightColumnPartners { width: 70%; float: left; background: white; } #mainContent { margin: 40px auto 0; background: url(../images/solutionsProven.jpg) no-repeat; width: 619px; } #mainContentPartners { margin: 40px auto 0px; /*background: url(emptybackground.jpg) no-repeat #FFDFB9;*/ width: 611px; background: blue; } #footer { background: #190B08 ; height:67px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; position:relative; clear:both; } .darkHeader { color: #edbb8a; font-size: 90%; font-family: "Arial","Trebuchet MS",sans-serif; padding-left: 15px; padding-top: 10px; } .darkDescriptionBold { color: white; font-size: 14px; font-family: "arial","helvetica",sans-serif; font-weight: 800; padding-left: 20px; padding-right: 15px; width: 90%; } .darkDescriptionPartners { color: white; font-size: 12px; font-family: "arial","helvetica",sans-serif; font-weight: 200; padding-left: 20px; padding-right: 15px; width: 70%; } ----------------- Thanks again. ~SS Similar TutorialsI am converting a working table layout to a better div layout. One problem is that the height of the rows, which in a table layout would effectively be the height of the tallest cell, is being set to 0 in my divs. I basically have this nested structure Code:
<div id="tabl" style="position:absolute;">
<!-- not important, this is basically a container div--!>
<div class="row" style="position:relative;">
<!-- important, relative is the only way i know
how to arrange children by % values --!>
<div class="cola" style="position:absolute; left:25%; width:25%;">
</div>
<div class="colb" style="position:absolute; left:50%; width:25%;">
</div>
<!-- more cells --!>
</div><!--closes the row --!>
<div class="row"><!-- same as above, the structure repeats--!>
</div>
</div>
that's not a copy/paste of the actual code, just an adaptation highlighting what's important. The columns align perfectly, the problem is that the height of the rows is 0, and so the rows all overlap. Setting the height of row to 100px proved this basically. I could set height to a value large enough so that overlapping becomes unlikely, but I would much prefer to have the height automatically assume the value of the height of the tallest child, much like auto, but available to an element whose position is relative. if you want to see a live model of the actual code you can see it at: http://www.drfool.net/test/articles/ As you can see, the rows overlap. If there is no way to solve this problem in the way I described, I'm open to suggestions (so long as they don't involve table layout and/or something silly like frames) thank you PS, it's 5 in the morning and I'm going to sleep. I'll verify any suggestions in the afternoon when I wake up. Side note, that entire wing of the website is basically dead, so no need to tell me "the links don't work, the images don't load" UPDATE: Ha ha, the code works exactly as desired in IE (IE ignores height:100px, which is actually what I wanted in this case, to demonstrate my problem, irony) but not in FF3, which is my target browser. UPDATE: made the code more clear Pretty much what the title says. I have a parent div that I fill up up floating div's using javascript, but the parent won't grow. Only ie7 is a problem. To see the problem... Link is here... http://esteemforthehome.stealthwd.c...electedPageID=7 Add a couple products to the cart, click on "View Cart"... Filling in shipping info and click "Calculate Shipping". Its the "viewCartShippingOptions" div that doesn't expand. Thanks in advance hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children. so rather than having, for example sport football cricket formula one i have football cricket formula one sport the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'. is it possible though? i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down. here is an example of my nested list Code: <ul> <li>sport <ul class="up"> <li>football</li> <li>f1</li> </ul> </li> <li>music <ul class="up"> <li>stuff</li> <li>stuff2</li> </ul> </li> </ul> it probably isn't possible but i thought i would ask before giving up on the idea completely. thank you for your time Greetings, friends! I have a quick question about CSS. I am fairly versed in CSS 2.0 and the selectors that are used within. However, I am not sure if any specific type of selector is available to help me do what I want. I am looking for a selector that will define styles for an element that contains specific children. To give you an example, let's say that I have an image on my page. That image is assigned the class of "alignleft". Now, let's say that I make that image into a link. I would like to find a CSS selector that allows me to assign style definitions to that link. Let's say my code looks like: Code: <a href="http://www.example.com/"><img src="example-pic.png" class="alignleft" alt="Example Picture" /></a> Now, I know if it was the other way around: Code: <a class="alignleft" href="http://www.example.com/"><img src="example-pic.png" alt="Example Picture" /></a> I could use something like: Code: .alignleft > img However, I am not sure if there is any way to go up a level in CSS. I would envision it looking something like: Code: a < img.alignleft but I can't find anything in the CSS spec that refers to instances like that. Does anyone know of anything? For instance, I would want a spec that looks something like: Quote: E < F - Matches any E element that is the parent of an element F. The specific reason I'm looking for something like this is that I am using the class of "external" to assign a background image to all of my links that lead away from our Web site. However, if that link is an image rather than text, I want to set the background of my link to "none" so that the background image does not interfere with the image itself. Any help would be greatly appreciated. Thank you. Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! hi all i am trying to have a container that contains two divs....one sidecase and one main content problem i am having is getting them to aign across the page - that is the main content page is starting where the sidebar ends......any ideas?? if I have a main div that is 790 px wide, how can I have 6 divs floating inline that all are equal in width and take up all the space? I've tried to set the width and there is always a space at the right end. When it looks like I have 5 px leftover and bump up the width by 1 px, adding that to six divs makes the last one drop down. any tutorials or ideas would be great. Thanks, Scott Hi all, I've got a section of my site with three tabs at the top of it, and I want to change the content in the section depending on which tab is chosen, with a set of divs. I've been told that you can turn divs on and off with a button click. Can anybody tell me how to do this? Cheers Hello I was wondering if any one could help me with a problem with some divs, I would like to create a web page using just css and html which looks like this:- Whay I would like to know is how would I get the divs to keep aliened as in the picture?? Any help would be very appreciated. Apologies for my crude code. I'm attempting to learn css on the fly. My design is looking right on Macs (Firefox, Safari) but the image gallery I've cobbled together is all wrong on pretty much any browser on a PC. Any ideas? (and also - the menu keeps shifting down about 125px more than it should on IE 6.0, any thought there would be equally appreciated!!) many, many thanks. I'm at a roadblock. charlie In IE my center div is even with the rest of the columns. in ff it is not. why? My style sheet does not specify a top-margin to be anything other than default ... http://www.nevertap.com/event.php Please have a look at http://www.root.lamtha2.co.uk/cssproblem/ why is there a gap between #header and #maincontent in both IE and FF how do I resolve? thanks Right now I'm using a table for showing how many people from each state have signed a petition. It looks sort of like this: Code: <table> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">CA</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">1242</a></td> </tr> <tr> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">TX</a></td> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">550</a></td> </tr> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">FL</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">487</a></td> </tr> </table> Should I be using DIVs? Hi All, I am trying to get to grips with css positioning and am hitting problems. The code below is my complete page (inc css). I am trying to get the 3 divs - leftbox, middlebox and rightbox to sit alongside each other with 5px gaps and all 3 being vertically aligned 5px below the frontsplash div. 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" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
#header {
background-color: #80724d;
height: 70px;
width: 790px;
border-bottom: 1px solid #fff;
}
#navbar {
background-color: #d5c8a4;
height: 25px;
width: 790px;
top: 70px;
border-bottom: 1px solid #fff;
}
#frontsplash {
background-color: #fbf8ef;
width: 500px;
margin: 5px;
padding-left: 10px;
padding-bottom: 10px;
}
#frontboxcontainer {
}
#threeboxes {
display: block;
}
#leftbox {
float: left;
background-color: #d5c8a4;
width: 200px;
padding-left: 5px;
}
#middlebox {
top: 0px;
background-color: #d5c8a4;
margin: 210px;
width: 100px;
padding-left: 5px;
}
#rightbox {
top 0px;
background: #d5c8a4;
width: 100px;
margin: 310px;
}
h1 {
font-family: "Times New Roman", serif;
font-size: 24px;
color: #80724d;
padding: 0px;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #80724d;
padding: 0px;
}
p {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #323232;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
float:left;
margin:0;
padding:0;
border-right: 1px solid #fff;
}
#navbar a {
display:block;
padding:0px 10px;
}
</style>
</head>
<body>
<div id="header">
Site Name
</div>
<div id="navbar">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Downloads</a> </li>
<li> <a href="#">Documentation</a> </li>
<li> <a href="#">Contributing</a> </li>
</ul>
</div>
<div id="frontboxcontainer">
<div id="frontsplash">
<h1>This is the title ... </h1>
<p>This is the introductory text This is the introductory text This is the introductory text
This is the introductory text This is the introductory text This is the introductory text
</p>
</div>
<div id="threeboxes">
<div id="leftbox">
<h2>DEMONSTRATION</h2>
<p> A fully functional demo of the
application is available online
</p>
</div>
<div id="middlebox">
<h2>SUPPORT US</h2>
<p>Why not donate to help keep
the project alive?
</p>
</div>
<div id="rightbox">
<h2>SERVICES</h2>
<p>Professional services available
with the application.
</p>
</div>
</div>
</div>
</body>
</html>
It has all gone pear shaped..... any ideas? Thanks. Hi there, For some reason, I have a white space appearing above my divs. This is only happening in FF though. I have a header and 2 columns underneath, but the two columns underneath the header have a white gap above them. This is my CSS: Code:
#clear{
clear:both;
}
#wrapper{
width: 780px;
margin: 0 auto;
}
#header_wrapper{
width: 780px;
background-image: url('img/header_bg.jpg');
height: 86px;
}
#logo{
float:left;
margin-left: 20px;
}
#header_right{
float:right;
margin-right: 20px;
margin-top: 60px;
}
#left{
float:left;
width: 580px;
margin-top:0px;
}
#right{
float:right;
background-color: #dddddd;
width: 200px;
}
and this is my HTML Code: <div id="wrapper"> <div id="header_wrapper"> <div id="logo"> <a href="index.html"> <img src="img/logo.jpg" alt="Pitter's Painting" border="0" /> </a> </div> <div id="header_right"> <a href="index.html" class="orange">Home</a><span class="white_small"> | </span><a href="#" class="orange">Contact Us</a> </div> </div> <div id="clear"></div> <div id="left"> sadsad </div> <div id="right"> nav </div> Any ideas what I have wrong? |
|||||||