|
CSS - Divs In A Container Not Rendering Correctly.
I am having a problem with a couple divs not rendering correctly. I'm building an online tournament bracket system, and I'd like the divs to be flush with each other, but in all browsers it's rendering incorrectly.
css Code: Original - css Code <style type="text/css"> div { font-family: Arial, Verdana, "Times New Roman", sans-serif; font-style: normal; color: Black; } .gamecontainer { position: absolute; width: 120px; } .player { font-size: 12px; background-color: lightblue; width: 100%; text-indent: 0.5em; border: solid 1px; margin: 0px; padding: 0px; } .infoblock { border-right: solid 1px; font-size: 10px; width: 100%; text-indent: 0.5em; margin: 0px; padding: 0px; } </style>
html4 Code: Original - html4 Code <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div> Similar TutorialsOk, 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. Hello Gang! First off, thank you for taking your time to help a noob. Here is my problem: With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section). Can anyone spot why the pages render 2 different ways? LINK 1 LINK 2 Thank you for your time. Surprise, surprise. I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected. I'm thinking it has something to do with the float but can't seem to figure it out. Any ideas? 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>Untitled Document</title>
<style type="text/css">
.hdr {
background-color: #ccc;
}
.tab {
padding: 0px 5px;
background-color: #666;
border: 1px solid #000;
border-bottom: none;
color: #fff;
float: left;
}
.tab.active {
background-color: #fff;
color: #000;
margin: 0px 3px 0px 3px;
}
</style>
</head>
<body>
<div class="hdr">
<div class="tab active">tab 1</div>
<div class="tab">tab 2</div>
<br style="clear: both" />
</div>
</body>
</html>
I'm having some trouble around the bottom of one of my pages, where the CSS is not placing images correctly the first time the page loads. Frequently the footer is not attached to the bottom as it should be, but floating some varying number of pixels off the bottom. If I hit 'refresh' everything snaps into place as it should, but for some reason the first time it isn't working right. Here's the page I'm referring to: http://www.auroratheatre.org/show.php?prod_id=23&ref=seas (you can change that prod_id number to see the page with different queries) The photos are all pulled from a MySQL query, and the code to display them goes something like this: PHP Code: <html> <body> <div id="wrapper"> <div id="content"> <div id="col"> .... </div> <div id="main"> ... <h1>Cast</h1> <div id="cast"> <ul> <?php do { ?> <li><img src="images/headshots/<?=$row_bios['headshot']?>" /></li> <?php } while ($row_bios = mysql_fetch_assoc($bios)); ?> </ul> </div> <div class="clear"></div> <ul style="padding-top: 10px"> <li><a href="show_bios.php?prod_id=<?=$prod_id?>">read all the bios here</a></li> </ul> <div class="clear"></div> </div> <div id="photocol"> <img src="images/rightpics/<?=$rightpic?>" width="217" height="470" /> </div> </div> <div class="clear"></div> <div id="footer">...</div> </div> </body> </html> and the relevant CSS is he Code: html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
text-align: center;
}
html>body, html>body #wrapper {
height: auto;
}
#content {
width: 774px;
margin: 0px auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 403px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
width: 100%;
background-color:#000;
position: absolute;
bottom: -2px;
left: 0px;
text-align: center;
}
.clear {
clear: both;
}
#cast ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#cast li {
display: block;
width: 100px;
float: left;
text-align: center;
line-height: 70%;
}
This happens in both IE and FF - anyone have any idea what's going on, and how I could get it to load correctly the first time? Thanks, Daniel hi guys, i've modified a script that i found on the web that creates a CSS dropdown menu (without using any javascript whatsoever). The menu's work flawlessly in Google Chrome, Firefox and IE 7/8. However, IE 6 like usual is giving me a problem. However, it is only a minor problem but i cant seem to fix it. Please find attached a copy of my HTML and CSS code. Please note:- The css code in the test.txt file is used for styling in all browsers. The css code found in the test_dropdown_ie.txt file is for IE 6 only. If you create these files and open test.html in IE 6 then it will appear fine at first. But if you hover over one of the menu's in the middle, then you will notice that the left hand border of the resultant dropdown menu does not display. However, it does display when you hover over one of the options on the resultant dropdown menu. I need the left hand side border to appear at all times. I did manage to get it working by changing the following CSS rule:- Code:
.menu ul li a:hover ul
{
left: -1px;
}
I changed this to:- Code:
.menu ul li a:hover ul
{
left: 0;
}
This solved the disppearing left hand side border issue but it threw up an even worse issue. If you make this fix and hover over the first or last menu item, you will notice the border of the dropdown menu does not line up with the top menu. I do not like this and find it less acceptable than the initial problem. What i need to do is find a way of lining up the top menu's border with the resultant dropdown menu's border and stop the disappearing left hand side border issue. Any help would be greatly appreciated. Thanks. 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. Hi, i am getting a delay in the css rendering the position of divs, on my page, in ie6. This doesn't happen every time i load the page, but every so often certain floated divs are out of position and then they snap back into position after 2-10 seconds. Anybody suggest a solution??? The link to my stylesheet is in the header, so i can't imagine its to do with the stylesheet not loading up before the page is displayed. Thanks for your help Hi! I have a problem at andreaspohlmann.com with an (on win7) IE8 Problem, same problem on XP for FF and IE. The text underneath the start images should be the same format as the text underneath any of the gallery pics: see http://www.andreaspohlmann.com/wirtschaft/daimler/ difference between the two is first is nested 2 divs further, due to the slideshow and has a class instead of the id the style that should be applied is: (i used everything I could think of to disable inheritance) #bu h1, .bu h1, .caption { font-family:"Arial", Helvetica, sans-serif; background-color:none; color: #000; text-decoration: none; word-spacing: normal; text-align: right; letter-spacing: 0; text-indent: 0; line-height: 10px; font-size: 10px; font-weight: bolder ; font-style: normal; text-transform: lowercase; display:block; } Still IE8 makes it look smaller, adding 1px makes it too large. the styles seem to be exactly the same in the IE developer thingy. I'm at a loss, any help apreciated. Cheers, Chris. Hi, what I'm trying to do is get two divs next to each other. That much I can do if I give them both a style of 'float:left;', but the problem with that is that they will overflow out of the div that they both sit in. Is there anyway to get two divs to sit next to each other, but to also expand the parent div if necessary? Thanks! Here's the template I'm working on: http://dhost.info/justusvizslas/template.php Here's my problem: I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7 I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height. Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too: CSS Code: #container {
width:792px;
height:50px;
margin: auto auto;
color:#000000;
background-color:#FFFFFF;
background-image:url(design/menuimage.gif);
background-repeat:repeat-y;
}
#navigation {
width:125px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
vertical-align:top
}
#pagecontent {
width:667px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
color:#000000;
background-color:#FFFFFF;
text-align:center
}
PHP Code: <div id="container"> <div id="navigation"><?php include "nav.php"; ?></div> <div id="pagecontent"> <br />Some more content here<br /> </div> </div> Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference. --links aren't working so if you have the patience to put the files defined for page and style sheet below after evaxu dot com this is a challenging problem!-- Hey Guys, I've recently got back into web design by making my girlfriend a professional homepage in dreamweaver and css. So far so good, and pretty simple, however I've been trying to format the CV page but now it's starting to unravel... Basically, each element has had a div box put around it so that these can be arranged and floated to the positions I want. This seems to have worked in theory, however the bottom div (or 2 as they're columns next to each other) overlap the container and remove the whole container's background. I have put this online on /resumecssfail.html and you can use the navigation to see how the container background is supposed to be working as on other pages. The /style.css style sheet can be found and the relevant id's are container, maincontent and those starting with cv at the bottom. All that has been changed for this page really are width, float and some padding. However I have tried to use attributes like clear, positioning, display and various re-sizing and float changing to the last elements - whilst also putting the whole CV in other css boxes etc etc. I have put the code through the WC3 CSS validator which says it's valid to css 2.1. I've trawled through blogs and forum posts but just can't seem to find a solution :\ One thing that does seem to help is removing the last div tag (or putting in another tag and putting a character after it - I'm thinking of using a white ".") but this wouldn't be valid css now would it?! I'm going to use these for now on the official site page, but please use the link above to see my error page that I'd like help with. Thanks! Scenario: I have an MS-Access application that uses a webbrowser control to display help. WebBrowser is IE. Suddenly the titles on my index page went missing ... no not missing. If I scrolled down and then scrolled back up they rendered. Sometimes rendering only partially (the bottom half of the words "Help Index" missing, top half rendered). The behavior replicated in the IE browser. Firefox and W3C meanwhile both indicated everything was groovy. Here was the context: Code: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xml:lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Diverse Leader Program Database Help System: Index</title> <link href="css/dlpd0.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="tpage"> <div class="idxbar"><a href="index.html">Help Index</a></div> <div class="dlpdtitle">Diverse Leader Program Database</div> <div class="dlpdsubtitle">Help Index</div> etc. Odd. What's more the page was nearly identical to the dozens of other pages in the same help system. The css was innocent enough Code: CSS
.dlpdtitle {
background:#ffffff;
font-weight: bold;
font-size: 16px;
font-family: Arial, Helvetica, Sans-Serif;
color:#012345;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
Four hours later ... The culprit was this: Code: HTML <a name="userdoc"></a><hr /> Everything reverted to placid normalcy with just this: Code: HTML <a name="userdoc"></a> <br /><hr /> So ... there you have the results of my investigation into this very bizarre quirk that probably none of you will ever encounter. But if you do ... now you know ;-) I think it's time for my lunch break now ... I need to know what attributes to give to my container div in order for this to work correctly. I have a div and within it are many floating divs, each that contain an image thumbnail and caption. I do it this way so the images fit on the page dynamically and it works great. Unfortunately the container div does not wrap around the height of the images. This causes content that should appear below the images to show up behind them. How do I make the container div actually stretch around all the child divs? here is a code sample Code: <div style="border: 1px solid blue; width: 100%; display : inline;"> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0003.jpg" rel="lightbox[post182]" title=" size 84k"><img border="1" src="/images/media/thumbs/182_YachtClub_0003.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0004.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0004.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0006.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0006.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0007.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0007.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0011.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0011.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0012.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0012.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0013.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0013.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0015.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0015.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0016.jpg" rel="lightbox[post182]" title=" size 68k"><img border="1" src="/images/media/thumbs/182_YachtClub_0016.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0019.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0019.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0020.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0020.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0021.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0021.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0022.jpg" rel="lightbox[post182]" title=" size 36k"><img border="1" src="/images/media/thumbs/182_YachtClub_0022.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0026.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0026.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0028.jpg" rel="lightbox[post182]" title=" size 50k"><img border="1" src="/images/media/thumbs/182_YachtClub_0028.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0030.jpg" rel="lightbox[post182]" title=" size 52k"><img border="1" src="/images/media/thumbs/182_YachtClub_0030.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0031.jpg" rel="lightbox[post182]" title=" size 54k"><img border="1" src="/images/media/thumbs/182_YachtClub_0031.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0032.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0032.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0033.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0033.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0034.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0034.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0035.jpg" rel="lightbox[post182]" title=" size 51k"><img border="1" src="/images/media/thumbs/182_YachtClub_0035.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0037.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0037.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0038.jpg" rel="lightbox[post182]" title=" size 61k"><img border="1" src="/images/media/thumbs/182_YachtClub_0038.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0039.jpg" rel="lightbox[post182]" title=" size 30k"><img border="1" src="/images/media/thumbs/182_YachtClub_0039.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0040.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0040.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0041.jpg" rel="lightbox[post182]" title=" size 45k"><img border="1" src="/images/media/thumbs/182_YachtClub_0041.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0042.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0042.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0044.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0044.jpg" alt="" /></a><br/></div> </div> Hello, I am sure that the solution to my problem is obvious in many ways. I thought maybe a fresh set of eyes would help. I have a two column site, the columns are constructed side by side using the css float parameter. I have a wrapper around all of it to center it, and divs for every element. One of the last divs (containing an h2, but I'd rather use images)will not drop down and line up with other h2. They are both inside divs. I followed several instructions on several websites, listed below, but I cannot get this div to sit right, meaning be under my images (using lightbox 2) and act as a delimiter for the next set of images Web Site: (sample dot funky-penguin dot com) CSS help garnered he (alistapart dot com/stories/practicalcss) My xhtml and css 2.0 all validate, so I don't think that is the problem. I hope I was specific enough. Thank you in advance for all of your assistance. Hi folks, I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want: I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this: Code: ________________________ l l l fluid fix fluid l ________________________ restrictions: i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF .... i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo thanx! i want to redesign the page i have to only be displayed with floats and margins and no more positioning .... I want to have one main div that is horizontally centered on the page. Inside of it I want two nested divs, located right next to each other. It seems that the top property of the second nested div is being ignored, as it is being placed directly below the first nested div. Here is a sample that demonstrates what is happening. Am I doing something wrong or is what I'm trying to do fundamentally the wrong way to do it? Code: <html>
<head>
<style type="text/css">
#a
{
width: 800px;
height: 800px;
margin: 0 auto;
text-align: center;
background-color: #ff0000;
}
#b
{
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: #0000ff;
}
#c
{
position: relative;
top: 50px;
left: 350px;
width: 300px;
height: 300px;
background-color: #00ff00;
}
</style>
</head>
<body>
<div id=a>
<div id=b>test</div>
<div id=c>test</div>
</div>
</body>
</html>
Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
|
|||||||