|
CSS - Buttons Not Displaying In Absolute Positioned Pop Up Div In Ie
I'm make a simple display:hidden , display:visiable "pop up" div box. The popup works wonderful in FF but IE, the button does not display.
Here is my full page (short and simple) 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" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function DIVshow(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "visible";
}
function DIVhide(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "hidden";
}
</script>
<style type="text/css">
#popupcontent {
position: absolute; top: 50%; left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
visibility: hidden;
overflow: hidden;
background-color: #F6F6BB;
border: 1px solid #333;
padding: 5px;
}
</style>
</head>
<body>
<p><a href="#" onClick="DIVshow('popupcontent');">Click here</a> to open the popup.</p>
<div id="popupcontent">
<p>This is a popup window!</p>
<input type="button" value="close" onClick="DIVhide('popupcontent');" />
</div>
</body>
</html>
Working sample can be seen he Click Here It works in both IE and FF if I write my hidden div tag like this: Code: <div id="popupcontent">
<div>
<p>This is a popup window!</p>
<input type="button" value="close"
onClick="DIVhide('popupcontent');" />
</div>
</div>
Obviously I want to avoid the extra div tags if possible. Anybody know what happening here and how to fix it? Thanks! Similar TutorialsI'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content. Here is the css: Code:
#nav {
background-image: url('../images/nav-full-bg.jpg');
background-repeat: repeat-x;
width: 967px;
height: 69px;
padding: 0;
margin: 0;
overflow: hidden;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display:block;
padding: 11px 12px 13px 12px;
font-weight:bold;
font-size: 13px;
font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
color: #626262;
margin: 0;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
}
#nav li ul { /* second-level lists */
position:absolute;
width: 200px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border-bottom: 2px solid #808080;
background-image: url(../images/davidpng2.png);
z-index: 900;
}
#nav ul li {
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul li a{
padding:5px;
display: block;
width: 190px;
color: #000;
font-weight:normal;
font-family:verdana;
font-size:11px;
}
#nav li ul li a:hover{
background-color:#a2c9f4;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -23px 0 0 200px;
;
}
#nav li ul li ul li a{
display: block;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
hey guys JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc). It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens. Code: <div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div> I need IE to render the same as FF, and start the nav panel from the left. Any ideas? IE Screenshot FF Screenshot Hi all, I want to place a piece of text directly below an item that has a 'position: absolute' style on it, but when I put a div in there for the new text, it just places the text at the top of that absolute positioned item. Is there any way to get past this apart from floating the item? Cheers. I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win). In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far. The HTML... 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"><!-- @import url(css/base.css); --></style> <style type="text/css" media="print"><!-- @import url(css/print.css); --></style> </head> <body> <div id="container"> <div id="head"> <div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div> <div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div> </div> <div id="leftColumn"> <img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/> <p class="linkSelectedTop1">Welcome</p> <p class="link1"><a href="bio.php">Biography</a></p> <p class="link1"><a href="blog.php?category=">Musings</a></p> <p class="link1"><a href="guestBook.php">Guest Book</a></p> <p class="link1"><a href="links.php">Links</a></p> <p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p> </div> <div id="rightColumn"> <div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div> <div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div> <h1>Welcome</h1> <p class="clear"> </p> </div> <div id="footer"><p> </p></div> </div> </body> </html> The CSS... html { height: 100%; margin: 0 auto; padding: 0; text-align: left; background-color: #000000; } body { height: 100%; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 80%; background-color: #000000; } a { text-decoration: none; color: #A50023; } #container { position: relative; margin: 0; padding: 0; min-height: 100%; } * html #container { height: 100%; } #head { position: relative; background-image: url("../images/headerBlend.gif"); background-repeat: repeat-x; background-position: 0 0; text-align: left; margin: 0; padding: 0; height: 100px; } #headerTitle { position: absolute; top: 0; left: 0; z-index: 10; } #headerGraphic { position: absolute; top: 0; right: 0; z-index: 9; } #rightPages48 { position: absolute; top: 0px; right: 0; z-index: 10; } #krdPortrait { position: absolute; top: 0px; right: 64px; z-index: 10; } #leftColumn { float: left; top: 100px; left: 0; z-index: 10; width: 120px; margin: 0; padding: 0; background-color: #000000; text-align: right; } #leftColumn p { font-weight: bold; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #leftColumn a { color: #BFA673; } #leftColumn a:hover { color: #A50023; } .link1 { border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelected1 { color: #A50023; border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelectedTop1 { color: #A50023; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #rightColumn { position: relative; min-height: 100%; margin: 0; margin-left: 120px; padding: 0; background-image: url("../images/rightColumnFill48.gif"); background-repeat: repeat-y; background-position: 100% 0%; background-color: #FFFFFF; text-align: left; } * html #rightColumn { height: 100%; } #rightColumn h1, h2, h3, h4, h5, h6, p { margin-left: 36px; margin-right: 320px; margin-top: 0px; margin-bottom: 0px; } #rightColumn h1 { font-size: 200%; color: #606880; padding-top: 36px; } #rightColumn p { color: #333333; margin-top: 9px; } #clear { width: auto; height: 500px; margin-right:48px; margin: 0; padding: 0; margin-right:48px; background-color: Transparent; } #footer { width: auto; height: 72px; margin: 0; padding: 0; background-color: #000000; } #footer p { margin-top: 36px; } Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content. Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this? Here's my css: #container{ position:relative; height:100%; width:780px; } #footer { position: relative; top: 0px; left: 0px; clear:both; } It seems strange to me if I begin a page with: body{text-align: center} and a following div with a wrapper: #wrapper{position: absolute; top: 0px} that this would push everything to the left or the right depending on the browser. It seems the logical thing to occur would be that the body tag would shift everything to the center and the wrapper would simply press up to the top of the screen. My problem is fixed simply by changing the position to relative for the wrapper, but I'm curious why that's the case. Thanks. I'm trying to place an absolutely positioned layer over other layers. It works in everything but Windows IE (surprise). If you remove the 'main' <DIV> it works fine (unfortunately, that is not an option). http://www.tuttobellotrouve.com/newsite/tuttobello/testpage.html CSS is internal. You SHOULD be able to see a small frame with a gift package in it, floating over a narrow horizontal box. Ideas? Thanks, Brad I cannot get the footer to sit at the bottom of the page when I use absolute positioning. I need the #main to stretch to whatever the content height and the footer to sit underneath. I know its fairly easy to achieve with relative positioning but I need absolute positioning for for other elements. Can anyone help? html, body {height:100%;} #container { width: 900px; position: absolute; top: 0px; left: 50%; margin-left: -450px; } #header { width: 900px; height: 105px; position: absolute; left:0; top: 0; } #main { position: absolute; left:0; top: 105px; } #footer { position:absolute; bottom:0; border: 1px solid yellow; } hello, i have a centered element and i would like to create an absolutely positioned div that attaches to the left side of the centered div. ive been following this resource which states: Quote: #wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; } This will make an inner element that you absolutely position at, for example, top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window. and so my css is: Code:
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
position:relative;
border: 4px #99968F solid;
width:587px;
margin: 20px auto;}
#left_block {
position:absolute ; top: 0px; left: 0px;
width: 299px;
height: 209px;
background-image: url(../images/mediaplayer_bg.png);}
what is happening though is that the left block is in the top left of the window and not the top left of the centred div. does anyone know how i can get this in the top left of the centred div and then ultimately to the left of the centred div (is a negative value possible?) thank you! Code: <div class="container"> <div>Booya</div> </div> Code:
.container {
position: relative;
}
.container div {
position: absolute;
bottom: 0;
right: 0;
}
Is there any way to position the nested div relative to its grandparent vs. its parent without losing the relative positioning, or is JS the only option? Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> Hi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: 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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig Okay I learned html/css about two years ago, and haven't really used it much since. but I'm trying to get back into it and have run into a problem with my design. Basically what I have is a DIV tag in the index that is used to center everything on the page, and provide a border. Basically what I wanted to do was add buttons that I made in photo shop and a banner to every page I'm making, so I put them in a SSI file. That works just fine, but what I'm trying to do is make them positioned relatively positioned to the DIV in the index but still have them in the SSI file, but every time I try to add the styles to either my SSI file, style sheet for the index page, or right to the main index it wont position them inside the div. Sorry if that really didn't make sense. If you need an example take a look at the texts from last night home page (sorry it wont let me include a url) and I'm trying to get it kinda like that but with the buttons along the top of that centered outlined portion, and the banner above that. I'm really stumped here, ladies and gentlemen, so if anyone has any idea how I can get this working that would be amazingly helpful. And if I missed anything you need to know just let me know, its pretty late and I can't really think straight right now, haha Thanks in advance. i have a webpage that the layout looks perfectly fine when looking on a monitor larger than 1024x768. when i look at it on that screen size everything inside of a div that is absolutly positioned gets put over it as if it is smaller than it is on the larger screen size. has anyone else come across this problem and know how to resolve it. please ask for more info if needed. many thanks in advance. i have attached an image with the problem showing RESOLVED: i redid my javascript At the bottom of my short form are two radio buttons that I wish to display inline, not vertically. My form is marked up with fieldset, legend and labels, and uses an unordered list to contain the form elements: Code:
<form action=\"preso.php\" method=\"post\">
<fieldset>
<legend>Four Ways to Search</legend>
<ul>
<li>
<label for=\"l_name\">Last Name:</label>
<input id=\"l_name\" name=\"l_name\" class=\"text\" type=\"text\" />
</li>
etc, etc...
</ul>
<ul>
<li id=\"genderButtons\">
<label for=\"maleGender\">Male</label>
<input id=\"maleGender\" name=\"gender\" class=\"radio\" type=\"radio\" value=\"m\" />
<label for=\"femaleGender\">Female</label>
<input id=\"femaleGender\" name=\"gender\" class=\"radio\" type=\"radio\" value=\"f\" />
</li>
</ul>
<submit / reset buttons displayed here >
</fieldset>
</form>";
I found several articles online concernign displaying those two rotten radio buttons inline, and all indications point to using the display:inline; selector. But I cannot for the life of me make it work. Here's the CSS I have so far for this form (directory is a <div>...</div> that wraps the form): Code:
#directory fieldset {
margin:1.5em 0 0 0; padding:0;
}
#directory legend {
margin-left: 1em;
font-weight:bold;
}
#directory fieldset ul {
list-style-type: none;
padding: 1em 1em 0 1em;
}
#directory fieldset li {
padding-bottom: 1em;
}
Can you tell me how to get those two blasted radio buttons and their labels to line up and pay attention? :-) Thank you very much for your effort. on my page http://tampabay-online.org/cetr/news/ the left side : Code: .content {
position:relative;
width:300px;
margin-left: 155px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
and the two on the right are : Code: #right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
#sidebar {
position:absolute;
width:200px;
top:400px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div. Any way to make these relative or fix that problem? Thanks! |
|||||||