|
CSS - Divs Overlapping?
Hey, I'm new both here, and to CSS, but I hope to learn. I just dove into it headfirst today, and I'm having some trouble.
Here's the whole source code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>WFSE- American College Radio</title>
<style type="text/css">
img{border:none;}
#ban{height:160px; background-image: url(bg13.jpg); margin:0px; padding:0px;}
#menu{height:40px; background-color:#462529; margin-left: auto; margin-right: auto; text-align: center; padding:0px;margin:0px;}
#main{height:100%; background-image: url(bg14.png); margin:0px; padding:0px;}
#break{height:13px; width: 21%; background-color:#462529; text-align: center; padding: 0px; filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;font-family:Verdana, Arial, Helvetica;font-size: 13px; line-height:13px; font-style:bold; font-color:#000000; float: right; clear: right;}
#content{width:69%; height:100%; margin-left: 25px;padding: 0px; background:white; float:left; filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-family:Verdana, Arial, Helvetica;font-size: 14px;line-height:26px;text-align:center;}
#sidebar {width:21%;margin-right:0px;padding:0px;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-family:Verdana, Arial, Helvetica;font-size: 14px;line-height:26px;text-align:right;float: right; clear: right;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id="banner">
<p id="ban">
<img src="ban1.jpg" border="0" alt="WFSE American College Radio" align="left">
</p>
</div>
<div id="menuuu">
<p id="menu">
<img src="mainbutton.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="djprofiles2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="music2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="sports2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="links2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
</p>
</div>
<div id="main">
<div id="sidebar">
<b>request line</b>:<br>
814-732-2889
</div>
<div id="break">
<b>weather:</b>
</div>
<div id="content">
hey
</div>
</div>
</body>
</html>
Is my website, and I want the content section, floating to the left, to not be interferred with by the content floating on the right. The div should be lined up with the menu at the top. And I'm not entirely sure why there's that blank space where the page ends. Can anyone help me? I know the source is a mess. EDIT: Fixed this problem with a "position:absolute", but I'm not sure if this was the best way to solve it or not, or if I'll run into this problem again soon Similar TutorialsI'm new with CSS and have been trying to find an answer to an issue with overlapping divs in my layout. It's a two-column type layout -- the left side should stay static width and the right should resize with the window. Right now, if you close the window enough, the two divs overlap. What am I doing wrong here? I prefer that they not overlap and that the right side (#maincontent) just resize vertically/scroll. Any help would be greatly appreciated. Here's some of the CSS: Code: #content { margin-top: 24px; position: relative; width: 100%; overflow: auto }
#maincontent { position: relative; right: 8%; width: 56%; float: right }
#sidebar { position: absolute; width: 404px; float: left }
I'm trying to overlap two divs -- currently works fine in FF, but not IE 6 or 7. I need the left column to overlap the right column. Here's a sample of what I have: CSS Code: body {
background-color:#e4ebf7;
height:100%;
}
#outer {
position:relative;
margin:0 auto;
width:1000px;
padding:0px;
overflow:visible;
height:100%;
z-index:1;
}
#header {
position:relative;
height:28px;
border:1px solid #5e5e5e;
margin-bottom:5px;
z-index:2;
}
#left_column {
position:relative;
height:100%;
float:left;
width:277px;
overflow:visible;
z-index:4;
}
html #right_column {
height:768px;
}
#right_column {
position:relative;
background-color:#FFFFFF;
border:1px solid #5e5e5e;
border-left:none;
margin-left:5px;
min-height:768px;
height:auto;
z-index:3;
}
#footer {
clear:both;
height:35px;
background-color:#FFFFFF;
border:1px solid #5e5e5e;
margin:0;
margin-top:15px;
z-index:2;
}
HTML Code: <body> <div id="outer"> <div id="header">stuff here</div> <div id="left_column">bunch of other divs here</div> <div id="right_column">bunch of other divs here</div> <div id="footer">footer stuff here</div> </div> </body> I am new to css, and i have a div that is overlapping another div if the page gets too long. It looks fine in IE, but not in Firefox.. here is what I have: style.css Code:
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
font-size: 11px;
color: #FFFFFF;
background-color: #000000;
background-image: url(images/page_bg.jpg);
margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
background-repeat: repeat-x;
}
td
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFCC00;
}
#mainarea
{
background-color: #000000;
width: 756px;
align: center;
text-align: center
}
#logo
{
float: right;
width: 221px;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 2px;
}
#quote
{
padding-top: 5px;
padding-left: 5px;
text-align: left;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 2px; border-right-width: 0px;
}
#mainimage
{
float: left;
width: 756px
}
#footer
{
background-color: #000066;
padding-bottom: 5px;
text-align: left;
padding-left: 5px;
vertical-align: top;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}
#middlearea
{
background-color: #000000;
background-image: url(images/bg-mainarea.jpg);
text-align: left;
height: 415px;
vertical-align: top;
background-repeat: no-repeat;
background-align: left;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}
#leftnav
{
float: left;
width: 198px;
vertical-align: top
}
#content
{
color: #999999;
float: right;
width: 527px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
padding-top: 15px;
line-height: 18px;
vertical-align: top
}
a
{
color: #FFFFFF;
text-decoration: none
}
a:hover
{
color: #6699CC;
text-decoration: underline
}
main.html Code: <html> <head> <title>Title Here</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div align="center"> <div id="mainarea"> <div class="style1" id="logo"> <img src="images/logo.gif"> </div> <div id="quote"> Put some kind of a quote/saying/slogan here?<br><br><br> </div> <div id="mainimage"> <img src="images/image-home.jpg"> </div> <div style="clear:both"> </div> <div id="middlearea"> <div id="content"> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> </div> <div id="leftnav"> Navigation Links Here </div> </div> <div id="footer"> Footer text here </div> </div> </div> </body> </html> I am having two problems: Both involve this page http://oharenoise.org/new/ 1. The Contact Us, found on the left-hand side of the page (in grey column) butts up right against the navy blue box above it. This does not occur in all browsers, ie Firefox. 2. The buttons on to the right of the flash animation overlaps the navigation. Any help with these are much appreciated. Hi, I am wondering if someone could tell me why the div "leftcolumn" and a graphic in the div "topright" appear to overlap the div "navigation" when viewed in Firefox on a Mac. The website is viewed he http://www.oharenoise.org/new/index2.htm Thanks. I am trying to create a site with a footer below the content, and I want the footer to be at or below the bottom of the browser window (that is, on pages where the content is less high than the window, the footer should be at the bottom of the window, but on longer pages, the footer will be off the bottom of the browser window until you scroll down past all the content to see it). I've done this with the following code, where I have a DIV that's 100% high, then two futher DIVs inside this: one to contain the content of the page, and the second to contain the footer. The footer DIV is positioned with "bottom:0px" to make it appear at the bottom of the browser. This works fine, until the window is shrunk down, and then (I think because of the "bottom:0px") the footer DIV moves over the content DIV until its bottom is in line with the bottom of the content DIV. What I want to happen is that when the window shrinks, the footer moves up only until its top touches the bottom of the content DIV, and then if the window shrinks further, it will become invisibile until you scroll down. Please can somebody help me to acheive this? Many thanks, Gary Code: <body text="#000000" style="background-color:#008000; text-align:center; height:100%;"> <div style="background-color:#ffffff;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:750px;height:100%;"> <div style="background-color:#0000ff;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:750px;height:200px;"> </div> <div style="background-color:#00ff00;position:absolute; left:0px; bottom:0px; width:750px; height:100px; /*MainDivStyle*/" __AddCode="here"></div> </div> </body> Howdy I have a website http://sopadvert.com/ which I am trying to modify after I messed up the old website. Now after creating the theme for the wordpress website, I have made some modifications so I can put a texture below the header ( at the beggining the texture was present only above the header ). It looks fine in Opera, FF, Chrome and Safari, but in IE it is a mess. Here is the code I have added: style.css Code:
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0px;
}
#teste
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 203px;
background-image: url('images/background.png');
background-repeat: vertically;
z-index: -100;
}
#art-page-background-glare
{
position: absolute;
width: 100%;
height: 264px;
left: 0;
top: 0;
}
#art-page-background-glare-image
{
background-image: url('images/Page-BgGlare.png');
background-repeat: no-repeat;
height: 264px;
width: 879px;
margin: 0 auto;
}
header.php Code:
<div id="art-page-background-glare">
<div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
<div id="teste">
</div>
<div class="art-Sheet">
<div class="art-Sheet-body">
<div class="art-nav">
<ul class="art-menu">
<?php art_menu_items(); ?>
</ul>
</div>
The red thing is what I have added. Can someone help me please? Thank you I'm having a hard time getting 2 DIVs to line up appropriately. The DIV in question (#main) should just sit directly below the header (#header) DIV. If I include a clearing element (hr class="clear") then I get a space between my DIVs. If I don't include the clearing element, then I get an overlap. The problem is that it only overlaps to the height of my navigation bar (#navigation). Any suggestions would be greatly appreciated. Site is he www . deepwaterchurch . com / cms I'm having a layout problem in firefox. In IE the layout is just how it should look, but in firefox, the dynamic links on the left side overlap (one halfway on top of the next) and the top div is messed up as well. If I add an extra line break after each menu item, it works out in firefox, but is too spread out in IE. Anyone out there have any ideas? the site is at: http://meganmumford.com the css is at: http://meganmumford.com/megan_css.css man...this makes me sad... i thought it worked, but now IE destroys the whole looks by ripping big parts off the site all the way from left to right screen.... its the negative margin i understand all i need is two divs on top of eachother as my headers.. like...i do one top:-50px; and i know have extra 50 px space atleast in IE at the bottom with negative margin also it works in other browsers buti cant be giving all the rest of the coming divs under it also top:-50px right? i would but its not i rather want to do Hopefully an easy fix and I'd appreciate any reference links I can bookmark. I have the following site with a navigation bar and content: jimspace.dreamhosters.com/whirligig The content is first in the source with a float: right and the nav bar next in the code with a float: left. In FF the items in the nav bar flow out of the DIV box as they should. When I switch to IE6, the DIV box expands to the size of the longest text causing a float drop. An overflow: hidden solves it, but then of course the nav bar items are cut off. Here's the relevant HTML: Code: <div id="content"> <h2>get whirligigged!</h2> <p>CONTENT</p> </div> <!-- content --> <div id="navcontainer"> <ul id="navlist"> <li class="a"><a href="#">Item one</a></li> <li class="b"><a href="#">Item two</a></li> <li class="c"><a href="#">Item three</a></li> <li class="d"><a href="#">Item four</a></li> <li class="e"><a href="#">Item five</a></li> <li class="f"><a href="#">Item six</a></li> <li class="g"><a href="#">Item seven</a></li> <li class="h"><a href="#">Item eight</a></li> <li class="i"><a href="#">Item nine</a></li> <li class="j"><a href="#">Item ten</a></li> </ul> </div> <!-- navcontainer --> And the relevant CSS: Code:
div#content{float: right;
margin: 90px 25px 0 0;
height: 420px;
width: 700px;
clear: right;
border: 1px solid red;
}
#navcontainer
{
float: left;
width: 200px;
border: 1px solid blue;
}
How can I get this to behave in IE6? I couldn't really figure out what keywords to be searching for... I am more than happy to read a previous post if anyone could direct me. Here's my problem: Attempting to layout a page using divs and no tables. I have a stylized left-side border that I have to use, and I would like it to stretch. It a symmetrical drawing, so I cut it in half in Photoshop, and then saved a 1 pixel slice from the center as a third picture. (So I now have 3 images: one for the top, middle, and bottom) The Top and Bottom images should stay the same height, and the Middle image will be repeated to make the border stretch with the window. My div layout is as follows: <div id="divTopLeft" style="top:0em;left:0em;position:absolute;display:block;background-image:url('images/bg_TopLeft.gif');background-repeat:no-repeat;height:300px;width:151px;z-index:0;"> </div> <div id="divMiddleLeft" style="top:300px;bottom:300px;left:0em;position:absolute;background-image:url('images/bg_MiddleLeft.gif');background-repeat:repeat-y;width:151px;z-index:0;"> </div> <div id="divBottomLeft" style="bottom:0em;position:absolute;left:0em;vertical-align:bottom;display:block;background-image:url('images/bg_BottomLeft.gif');background-repeat:no-repeat;height:300px;width:151px;z-index:0;"> </div> This works great as long as the window is at least 600 pixels high. If the window becomes shorter than that, "divBottomLeft" overlaps "divTopLeft" (and maybe Middle as well, but I can't tell). I thought that specifying the same z-index would make them run into each other instead of overlapping, but no such luck. Can anyone help? Thank you! -jim Hi everyone I have a 3 column layout with a footer. If the content ends up being too wide for the middle column (ie a large data table) I can't get the middle column to push the right hand column beyond the width of the screen. If the right column is absolutely positioned, the middle column just continues underneath the right column (overlaps). If the right column is floated right, it just drops down below the middle column. What I want it to do is bring up a horizontal scroll bar in the browser and let people scroll across for the right column. Based on the code below, if anyone has any ideas I would be unbelievably greatful. I've been pulling my hair out all day... My HTML is as follows: Code: <div id="content_container"> <div id="lft"> ... </div> <div id="mainbody"> .... </div> <div id="rght"> ... </div> <div id="footer"> ... </div> </div> My relevant CSS is as follows: Code: #content_container {
position: relative;
min-height: 100%;
top: 0;
left: 0;
width: auto;
height: auto;
border: 1px solid red;
}
#lft {
float: left;
left: 0;
top: 0;
width: 24%;
visibility: visible;
}
#mainbody {
position: relative;
left: 0;
top: 0;
width: 50%;
height: auto;
visibility: visible;
}
#rght {
position: absolute;
right: 0;
top: 0;
width: 22%;
visibility: visible;
padding-right: 10px;
}
#footer {
float: left;
bottom: 0;
left: 0;
top: 0;
clear: both;
width: 100%;
margin-top: 40px;
padding-top: 15px;
padding-bottom: 15px;
visibility: visible;
}
--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! Hello everyone, this is my first post, and i am fairly new to css and web design but i'm really exited to learn more (specially involving theming for drupal). I'm having a problem wrapping my mind around this design i'm trying to layout. Here is the naked design... Code: http://i65.photobucket.com/albums/h201/smiro/1-3.jpg And here is what it's supposed to behave like when there is a lot of content in it... Code: http://i65.photobucket.com/albums/h201/smiro/2-1.jpg as you can see from the first image i sliced a pixel to repeat in the center portion of the tree. In the second image is an illustration of what i'd like the final product to look like but i can't seem to be able to wrap my mind around how to make that happen. i'm starting to feel like it just might not be possible with CSS. here is the snippet of my html code Code: <div id="contentWrapper"> <div id="topWrapper"></div> <div id="bottomWrapper"></div> </div> and the relative CSS code Code: #contentWrapper {background-image: url(images/contentWrapper.gif);
background-repeat: repeat-y;
width: 924px;height: 100%;
margin: auto;}
#topWrapper{background-image:url(images/topWrapper.gif);
margin: auto;
height: 354px;
width: 924px;}
#bottomWrapper {background-image:url(images/bottomWrapper.gif);
margin: auto;
height: 393px;
width: 924px;}
The only thing i can think of is to assign the DIV with the text in it an absolute positioning relative to #contentWrapper but that will not cause #bottomWrapper to push down when the text DIV needs the room... anyway, thank you all for taking the time to look at this, i am very grateful and eager to discuss a possible solution Am hoping someone knows the deal here... I'm setting up a site where html skins feed into PHP to generate the final pages. It's very simple; just header, footer and main.html's for the index page. The problem: A DIV to the left of the main body holds a no-repeat background [to place an image in that area]. I want a slight overlap with the main body div; alas the second div contains links, and with even the slightest overlap of these 2 divs, the links go funky ~ you can't select them. I tried z-indexing it to no avail Does anyone know if there's a route around this conflict? The page: (URL address blocked: See forum rules) [koff. am just kicking it of layout wise, so do excuse the lack of actual content!] thanks for any help [hopey hopey] Got a problem in ie6 with divs dropping and a slight over lap in ie7. The tables are set width inside a 600px wide div but no matter what i do the columns on the right keep dropping. anyone have any ideas? how can i post screenshots when no urls allowed? 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. 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? 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. |
|||||||