|
CSS - Div Positioning Issue Using Css Z-index
Hi everyone, I'm a noob to most of this so take it easy on me.
I'm developing a page with a vertically aligned tabber (eventually) full of info. The code I've used was for a horizontally aligned tabber so I read up and changed the CSS to make the thing vertical. I've managed to get it in FF (and chrome and safari) so that the tabbed info div is appearing behind the navigation (which I like and want to keep) but in IE it doesn't stack at all. It re-aligns below the navigation if it's set to any more than pixel wider than the space it's got. If you look at my page in FF and IE http://king-asia.co.uk/test/about.html you'll see what I mean. I figured it should be a z-index trick but nothing I've tried seems to layer the content div and the nav div in IE. I've pasted in my code below. Can anyone spot the error(s)? CSS: Code: .tabberlive .tabbertabhide {
display:none;
border:1px solid #aaa;
width:538px;
height:400px;
position:relative;
float:right;
}
.tabber {
position:relative;
}
.tabberlive {
}
ul.tabbernav
{
margin:0;
padding: 0em;
font: bold 12px Verdana, sans-serif;
position:fixed;
float:left;
z-index:1;
}
ul.tabbernav li
{
list-style: none;
margin-left: 0;
display: block;
position:relative;
text-align:left;
}
ul.tabbernav li a
{
padding: 0.25em;
margin-top: 15px;
text-decoration: none;
display:block;
background: #DDE;
border: 1px solid #778;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #448;
background: #AAE;
text-decoration:none;
}
ul.tabbernav li.tabberactive a
{
text-decoration:none;
background-color: #fff;
border-right: 1px solid white;
margin-top:15px;
}
ul.tabbernav li.tabberactive a:hover
{
color: #448;
text-decoration:none;
}
.tabberlive .tabbertab {
border:1px solid #aaa;
width:540px;
height:400px;
position:relative;
float:right;
z-index:0;
}
.tabberlive .tabbertab h1 {
display:none;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
Tabber: Code:
<div class="style18" style="background-color:#FFF;">
<div class="tabber" style="background-color:#FFF;">
<!-- History -->
<div class="tabbertab" title="History">
<div class="style18" style="padding:1em; text-align:left;"><h3>History</h3>This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history.
</div>
</div>
<!-- What We Do -->
<div class="tabbertab" title="What We Do">
<div class="style18" style="padding:1em; text-align:left;"><h3>What We Do</h3><table class="style18" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. </td>
</tr>
</table>
</div>
</div>
<!-- Business Philosophy -->
<div class="tabbertab" title="Business Philosophy">
<div class="style18" style="padding:1em; text-align:left;"><h3>Business Philosophy</h3>This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food.
</div>
</div>
<!-- Quality Driven -->
<div class="tabbertab" title="Quality Assurance">
<div class="style18" style="padding:1em; text-align:left;"><h3>Quality Assurance</h3>This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do.
</div>
</div>
</div>
</div>
This is really starting to frustrate after I've spent 2 days solid on it and but cannot get round the problem. Help wold be greatly appreciated. Similar TutorialsI was asked to change the header to a rotating one, and I found a nice jquery solution. Of course at first it made the links at the top (on top of the image) disappear, but then I looked at the jquery code and saw that it used z-index (1000), and so I made <header p> = z-index of 6000. That brought them back and in fact it looked pretty good... except in IE. And, depending on what I'm doing to fix the IE problem, Safari. In those browsers, the rotating header appears flush under the header p links, rather than flush up against the border -- and you can see the old static image peeking out. http://esdcar.org/about/board.html?category_id=1&sub_id=2 I googled z-index and IE and found several different options for stacking problems, which it seems like this is. (Am I wrong?) Negative z-index on the header div that contains header p, solved the problem in Safari but not IE. I followed some other suggestion and made all the parent elements successively 1 higher in value. Basically I've tried many things and none have worked. This is the current iteration: Code: #container
{ color: #775b36;
background-color: #ffefca;
border: 4px #f5c674 solid;
width: 800px;
margin: auto;
background: url(../images/bkg_faux.jpg) repeat-y 50% 0;
z-index: 6003; }
<snip (unrelated divs)>
#content
{ width: 75%;
position: relative;
margin: 0em;
float: right;
z-index:6002;}
#header
{ background-image: url(../images/ec_landscape.jpg);
background-repeat: no-repeat;
background-position: top; height: 100px;
border-bottom: 4px #f5c674 solid;
text-decoration: none; color: #775b36;
text-align: left;
margin-bottom: 0em;
position:relative;
z-index:6001; }
#header p
{ float: right;
/*margin-right: 1%;*/
margin-top: 0em;
padding-top: .2em;
font-size: .7em;
position:relative;
z-index:6000;
display:inline;
background:#ffefca;
padding: 2px; }
What am I not getting? It seems like the z-index is the problem that was introduced, but I can't seem to fix it. First this seems like a common problem but I couldn't find an answer. I did look, maybe I didn't use the right search terms but I did look. So I have always wanted to do this but could never figure out a way to do it. I'd like to have relative positioned divs overlap each other and not push the rest of the layout around. Pretty much the exact same way absolute works, but just position relatively. This is best explained by example. Please see http://www.drudolph.org/new/test.php for a proof of concept. Basically, there's an outside layer (red border) that contains several layers inside (blue borders), and is styled so that it has fixed dimensions and can scroll vertically if necessary. Over the blue layers, I want to position another layer (green box). This layer should move with the blue boxes, so that if you scroll up and down, the green box stays with it. On top of that - and here's the kicker - the green box, which will be large enough that it sometimes will expand beyond the outside red layer, should be completely visible. So, the green layer needs to 1.) move relative to the blue layer but 2.) be seen outside the parent red layer at all times. You can see on the test two attempts. One puts the green layer in with the blue layers, so that it can be positioned relatively. Unfortunately, this puts it "inside" the red "stack," so I don't believe any z-indexing will allow it to show outside of the red layer. The second attempt puts the green div along side the red div, or on the same "stacking level." This allows you to use a z-index to put it above the red layer, but then it can't scroll relative to the blue layers inside. So, at this point, I believe it's impossible to do. Thoughts? Hi all, After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then ) The goal I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?) What I did so far To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code: html4strict Code: Original - html4strict 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> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body> <!-- CONTAINER --> <div id="container"> <h2 class="title">Quick Links</h2> <!-- SUBCONTENT --> <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <!-- CONTENT --> <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }
* {
The problem(s) Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one) Thanks for any help and if something isn't clear I'll try to explain it further! I know there's a thread just before me on the same topic - but I've already tried the suggested solution there and still can't get this one to work. The problem is I have is at: www dot whitespire dot net/index2 dot php When you re-size the page the ripple (called drop in css) should appear UNDER the main content/text box. Any suggestions would make my evening MUCH easier! Mercy buckets. G Hi I've got a popout menu that I've gotten quite close to where I want it. http://www.gamengai.com/main_beta_inv.php The main problem is that if I offset it too much, the navigation gets tricky. I can set it to where the popup looks like an extention of the original menu, but often the hover is deactivated -- a real pain. If I move it up a bit by fidgeting w/ the "top" element, it works, although there's some overlapping. My idea was to put the popout under the main menu to allevaite this a bit, but for the love of me cannot do it. This is the css sheet: http://www.gamengai.com/inv.css I've set top-level menu definitions w/ a z-index of 10, and the 2nd level w/ 1. But, the popout is still on top. Hi folks I'm having a problem displaying a CSS navigation menu within a website in IE8. It displays OK in Firefox and Chrome, but as I say, not in IE8. I haven't tried any other versions of IE. The story is that I got the code from mycssmenu.com, and have tweaked it here and there to make it appear as desired. I can't remember if I touched the z-index values or not at that time. I understand that the problem lies with IE's interpretation of z-index and I have tried to fix this problem by randomly changing the z-index values, but that didn't get me anywhere. I accept that my ignorance CSS code is ultimately to blame. The code in question is as follows: Code: <style type="text/css">
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:
solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}
.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:
relative;z-index:1;}.qmclear {font-size:1px;height
:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative;right:-473px;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:
block;white-space:nowrap;position:relative;z-index:
1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}
.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}
.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}
.qmmc, .qmmc ul {list-style:none;padding:0px;margin:
0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto
;}#qm0 ul {top:100%;}#qm0 ul li:hover>
ul{top:0px;left:100%;}
#qm0
{
margin:0px;
background-color:#FFFFFF;
border-width:1px 0px;
border-style:solid;
border-color:#FFFFFF;
}
#qm0 a
{
padding:3px 10px 3px 8px;
background-color:transparent;
color:#444444;
font-family:Arial;
font-size:11px;
text-decoration:none;
border-width:0px 0px 0px 1px;
border-style:solid;
border-color:#BABABA;
}
#qm0 a:hover
{
background-color:#EFF4FA;
color:#000000;
text-decoration:underline;
}
#qm0 .qmparent
{
background-repeat:no-repeat;
background-position:92% 50%;
}
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#EFF4FA;
background-image:url("images/item_bg.gif");
color:#000000;
text-decoration:underline;
}
#qm0 div, #qm0 ul
{
padding:5px;
background-color:#FFFFFF;
border-width:1px;
border-style:solid;
border-color:#333333;
}
#qm0 div a, #qm0 ul a
{
padding:3px 20px 3px 5px;
color:#333333;
font-size:11px;
border-width:0px 0px 0px 4px;
border-style:solid;
border-color:#FFFFFF;
}
#qm0 div a:hover, #qm0 ul a:hover
{
text-decoration:none;
border-color:#75B1C2;
}
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
text-decoration:underline;
border-color:#75B1C2;
}
</style>
Can anyone see where the issue lies? Thanks very much. Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
hi, Ive got a mixture of CSS and tables (not ideal i know) the problem is the image to the top right. ive added the image within the container and then the rest of the site content is within a table just below the container line within the index page. How do i get the image over the tabled data? URL: http://www.primaryictsupport.co.uk/clients/swinnow/ Thanks for any help... Mike Please look at this page - http://casadelsol.tmhdesign.com/about.asp I have a div with an id of "header". In that div I placed this code Code: <div style="width:200px;height:200px;background-color:yellow;margin:0 0 -50px 400px;z-index:10000"> </div> As you can see it goes under the absolutely positioned div element with an id of top_header. I want to put a drop-down menu in the top header area but it slides under the top_header element. Can you help? Thanks Hello all, I am having a problem I can't seem to figure out. The site is: http://www.ciccotticenter.org/test_site/ When you view the site in IE6, the logo in the top left corner disappears. I have tried everything I can think of. Interestingly when I add * { border: 1px solid red; } it works. But I can't figure out what thats doing to make it work. Any ideas? Thanks, Ryan I am trying to place an element in a page that will over lap other elements. If I use position: relative; the element (a div cell) gets to far down on the page. If I use position: absolute to specify the verical position but not the horizontal it works perfectly in Firefox, but not IE (because IE requires both a vertical and horizontal specification in their abosolute positioning) works in Firefox, but not IE Code: position: absolute; top: 170px; I cant specify a horizontal position because the div cell needs to be inside another cell that is centered (so when the window is resized the main cell moves around. Here is the page because I'm sure my explanation is confusing. http://www.davenport-rock.com/news.php If you look at it in fire fox it looks good, but in IE, its not lined up right. Does someone know how to make this work in IE (and other browsers)? I am learning css and ran into a problem I can't figure out. When I add text in my main content div, it does push my footer down like I want it to. However, it keeps the existing space in the div between the content and the footer leaving a large gap at the bottom of the screen. Can anybody help me? The developing site is he thinkfishdesign - dot - com/temp/tf/ This is the css code : Code: @charset "utf-8";
/*-------------------
Style Template
-------------------*/
/*-------------------
HTML Styles
-------------------*/
body {
text-align: center;
margin: 0px;
background-color: #FFF;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3em;
}
/*-------------------
Structural Styles
-------------------*/
#container-content {
position:relative;
margin:0 auto;
height:auto;
width:980px;
height:auto;
text-align:left;
}
#container-page {
position:relative;
width:100%;
height:auto;
text-align:center;
}
#content-container {
position:relative;
top:-17em;
width:100%;
}
#content {
position:relative;
left:13em;
top:-33em;
width:45em;
}
#content-main {
position:relative;
width:100%;
height:auto;
}
#footer {
position:relative;
top:0em;
width:100%;
height:12.6em;
}
.footer {
background-image:url(images/template_footer.jpg);
background-repeat:no-repeat;
}
#intro {
position:relative;
left:20em;
top: -34em;
width:38em;
height:8.8em;
white-space:normal;
}
#logo {
position:relative;
left:50em;
top:-19em;
width:11em;
height:11em;
}
.logo {
background-image:url(images/template_logo.jpg);
background-repeat:no-repeat;
}
#photo-main {
position:relative;
left:1em;
top:1em;
width:16em;
height:20em;
}
.photo-main {
background-image:url(images/template_fish.jpg);
background-repeat:no-repeat;
}
/*-------------------
Side Navigation Styles
-------------------*/
#nav-container {
position:relative;
left:1.3em;
top:-12em;
width:12em;
height:19em;
}
.nav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}
.link-nav a {
color: #000;
text-decoration: none;
}
.link-nav a:visited {
color: #000;
text-decoration: none;
}
.link-nav a:hover {
color: #F60;
text-decoration: underline;
}
/*-------------------
Footer Navigation Styles
-------------------*/
#footer-nav{
position:relative;
top:13em;
left:3em;
width:40em;
height:2em;
}
.nav-footer {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}
.link-footer a {
color: #F60;
text-decoration: underline;
}
.link-footer a:visited {
color: #F60;
text-decoration: underline;
}
.link-footer a:hover {
color: #900;
text-decoration: underline;
}
Hello, Im making my Dad a website for his London Tour company, and ive pretty much got everything the way i want, i just need to add the content. However my only issue is that the positions of certain things changes in I.E.. Example: http://www.aranock-online.com/projecta In Firefox it works fine, In i.e it doesnt Hi I am not really very familiar with the positioning element. I have a site that has a fixed width in the center of the page. It all works fine. However there is a hidden box that pops up when you enter any text in the newsletter box at the top right - this appears outside of the fixed width and I cannot understand why it is allowed to do so. I notice that it does have "absolute" positioning defined in the CSS. Any clues as to what I can do to bring it back to its correct place under the newsletter box? Thanks a lot Site: http://www.componentcompare.com I just used position: relative;. Solved. I have a two column DIV arrangment (inside a one coulmn page layout), and above it, I want a single div that will contain absolut positioned images. Here's the two column CSS: Quote: /* 2 column div setup for map and sidebar */ #mapwrap { width:980px; margin:0 auto; } #mapmain { float:right; width:680px; } #mapsidebar { float:left; width:300px; } #testimg { position:relative; left:100px; top:150px; } And... Code:
<div id="buttondiv"><img src="/images/buttons/7on.png" id="testimg"></div>
<div id="mapwrap">
<div id="mapsidebar">
<div id="findaddydiv">
Something
</div>
</div>
<div id="mapmain">
Something Else
</div>
</div>
My problem is that when I build the DIV for the images in the code above the two column set-up, and view the whole thing, the images are ON TOP of the two coulun DIVs. How to force the image DIV to be ABOVE the two-column set-up? EDIT: Thanks for the help -- i've switched over to a more stable template so no need to help with the code below. Hey all, The problematic CSS codes a .rightbar { position:relative; top:292px; left:444px; float:right; text-align: left; width: 300px; height:250px; background: white; color: #000000; } #mogad { position: relative; top:0px; left:-15px; width: 300px; height: 250px; float: right; padding-left: 0px; padding-top: 20px; margin-left: 160px; } and #header{ padding:20px 0px 40px 0px; margin-left: 242px; position:relative; text-align: left; background: url((URL address for bg img)) no-repeat top left; } If you open the link in Firefox/Safari you can see that the Ad in the top right corner is to sit side-by-side with the main header image. The Ad also lines up with the rightbar links directly beneath it. The problem(s) are in IE where the Ad and rightbar links remain in the correct spot but the header height increases inexplicably and sort of messes up the organization. Any thoughts? If you would like more code let me know and I will do my best to be more descriptive. Thank you in advance for any help! Paul I have a page with a bunch of DIVs i'm trying to get positioned correctly. I want to have two DIVs sit next to each other, so I float one, right? I can get them to sit next to each other, but then the top line of the content in the 2nd DIV sinks down below the floated div. I can't get it to work. Any help? CSS: Code: html{}
body{
color: #000000;
margin: 0;
padding: 0;
background-color: #666666;
}
.container{
height: auto;
width: 650px;
margin: 0px 0px 0px 0px;
background-color: #333333;
}
/* Container Styles */
#news{
float:left;
position:relative;
width: 295px;
background-color: #FFF;
margin: 0px 0px 10px 25px;
}
#contact{
width: 295px;
background-color: #FFF;
margin: 0px 0px 10px 0px;
position:relative;
left: 325px;
}
HTML: Code: <div class="container"> <div id="news"> <h2>News</h2> <ul class="newslist"> <li>12.11.03 + news text...</li> <li>11.12.02 + more news text...</li> </ul> </div> <div id="contact"> <h2>Contact</h2> <ul class="contactlist"> <li><a href="#">mail be...</a></li> <li><a href="#">Design by ....</a></li> </ul> </div> </div> Thanks! |
|||||||