|
CSS - Prevent Divs From Dropping Down When Exceeding Width Of Parent
Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent.
The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally? I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities. Here is the current CSS I'm using: Code: #test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}
Similar TutorialsI have this structure setup in XHTML Code:
<div class="contentShellHeader">
Header
</div>
<div class="contentShellContent">
Content
</div>
I'd like to have contentShellHeader's width to only be as wide as the text within it, but have contentShellContent be the width of the parent shell. Any idea how I can do this across all browsers? 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? Hello, I'm afraid I'm back with more problems I have a 3 column layout. the Left column is floated left, right floated left and the middle column uses left and right margins. I then had cause to set a width on the middle column to give something with Layout for IE. When I add the width to the middle column, it looks fine in firefox but for some reason in IE, my middle div drops underneath the two floated divs, as if it is too wide. I have tried debuging by using background colours on the Divs and the width of the coloured area is the same in both browsers. It is as if there is something leaking out the sides. Even on this most basic example. Am I missing something basic? Code: <div id="wrapper" style="width:996px; background-color:#666666; margin-left:auto; margin-right:auto;"> <div id="lbar" style="float:left; width:170px; padding-left:10px; background-color:#FF0000; "> <p>left</p> </div> <div id="rbar" style="float:right; width:305px; background-color:#0033FF;"> <p>right</p> </div> <div id="middle" style="margin-left:190px; width:491px; margin-right:315px; background-color:#99CCCC;"> <p>middle</p> </div> </div> Thank you for any time taken in reading this JJ Hi, Is there any app or way to resize or change the position of the divs just dragging and dropping? Something like in Inkscape for resizing or moving objects. Ciao I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping. -Luke I've got a side navigation that displays correctly in every browser EXCEPT IE 6. Big shock... I want the navigation DIV to only be as wide as the content inside it. It does this in IE7, FF, Safari, etc. Any help would be greatly appreciated. The CSS: Code: #nav { background-color: #fff; width: 218px; height: 400px; float: left }
#menuContainer { margin-top: 120px; margin-left: 12px; position: fixed }
#menuContainer h3 { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 0 0 4px }
.menu { list-style: none; margin: 0; padding: 6px 0; border-top: 1px dashed; border-bottom: 1px dashed }
.menu li { font-size: 20px; font-weight: 900; text-align: right; text-transform: uppercase; margin: 3px 0; padding: 0 }
.menu a { color: #000; text-decoration: none }
.menu a:hover {}
.menu ul { list-style: none; margin: 0; padding: 0 }
.menu ul li { font-size: 12px; font-weight: bold; line-height: 14px; text-transform: lowercase; margin: 0; padding: 0 }
.menu ul a { color: #c00 }
.menu ul a:hover { color: #000 }
And the HTML: Code: <div id="nav"> <div id="menuContainer"> <h3>Site Name</h3> <ul class="menu"> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> </ul> </div> </div> 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> I have a container div that contains multiple divs floating left within it. The container css is Code:
div.divContainer{
width:100%;
}
The child divs css is: Code:
div.div1{
float: left;
width:50%;
}
When the contents of the left div gets too large (and the browser window too small) the end divs wrap. I have researched this quite a bit and it seems like a solution is to give the container a fixed pixel width. I would like to keep it a relative width. Any ideas? I would even consider placing a horizontal scrollbar on the container rather than having it wrap Thanks Hi. Lets say I've a div with width:300px and then there're some user generated content (Example: aaaaaaaaaa.....) that was so long without any whitespace that exceed the lenght of the div. Right now that word gone pass the right border of my div. Is there a way to style it so the word will not pass the right border and actually moved to the next line? I was thinking about changing the div as display table but maybe I don't want to do that and not sure if that will do it as well. The reason I don't want to use display as table because it's not compatiable to older browser. Is there any way to prevent this type of behaviour? Thanks. I have a few div on my page and the ones that have long lines or URL's are expanding width-wise. Code: <div style="width: 300px;">MyVeryLongLineThatCanAndMostLikelyContainsURLs</div> I would like that the div keeps the same width, as the height is not a problem as the div contains other text, causing it to grow downwards anyway, and allow the line to break up with out causing any possible hyperlinks that are in the text to fail if clicked. what happens is that the div grow wider to allow the long line to show inside. Hey guys, I am working on www. paulfenton .tk/wordpress: The side margins of this site are filled with background gradients. (they take up the left and right halfs of the site, with the main content drawn over the middle). The problem is, the div "bottomLeftGradient" is the width of the whole screen. I know this might be because I am using position:absolute, but that seems to be the only way I can make bottom:0px; take effect and cause this to sit on the bottom of the div rather than the top. It seems that if I use width:50%; that it works, but I did not have to do that for bottomRightGradient so something must be messed up here. Thanks for the help, -Paul Hi. How would I go about horizontally centering a number of divs within another parent div which has a set width of 500px? There maybe 2,3 or 4 divs of varying length within the parent div but no matter the number I always want them centered within the parent div. |............................................................| |............................................................| |............................................................| | <---DIV---> | <---DIV---> | <---DIV---> | |............................................................| |............................................................| |............................................................| http://cwin.redirectme.net/ext/ch/test.html ^ On IE, this works fine, the parent is red as expected, whereas on Mozilla, the parent has a white background. If i have no floats, it works as expected I hope I can explain this in a way that makes sense. I have a table layout where the number of columns is variable (sometimes it can have 1 column, sometimes it can have up to 9 columns), depending on what data is filled out on a previous form. The code in question: Code: <tr> <td> <div style="float: left; width: 13px"><img src="arrow.gif"></div> <div style="float: left; width: 93%;">My explanatory text goes here!</div> </td> <td> Column 2 Text </td> <td> Column 3 Text (and so on) </td> </tr> The two divs there need to float next to each other -- the first div is a little 13x13 arrow, the second div is some explanatory text. I can not just float the image left (and not put the text in a div), because the client wants the text to be left aligned in the div, not wrapping around the image. The issue: If there are less than 5 or 6 columns, it works beautifully. If you put more columns in there, then the second div appears below the first div. I've been fiddling with the widths on the second div, but it has to be a percentage (not a set number of pixels), because the number of columns is variable (as is the width of those columns). How can I make the columns float next to each other regardless of the width of the table cell that they are within? Any help is appreciated. I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5. My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated! ------------------------------------- Here's 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=UTF-8" />
<title>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title>
<link rel="shortcut icon" href="layout/hoot.ico" />
<link rel="stylesheet" type="text/css" href="athena.css" />
</head>
<body>
<div id="page-wrap"> <!-----page wrap div start------>
<div id="top"> <!-----top div start ------>
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" />
</div> <!-----top div end ------>
<div id="navbar"> <!-----nav bar BACKGROUND div start------>
</div> <!-----nav bar BACKGROUND div end------>
<div id="navigation"> <!-----navigation div start------>
<ul id="menu">
<li class="owl"><a href="index.html">Owl</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
<li class="portfolio"><a href="/portfolio/">Portfolio</a></li>
<li class="home"><a href="index.html">Home</a></li>
</ul>
</div> <!-----navigation div start------>
</div> <!-----page wrap end div------>
</body>
</html>
----------------------------------------- And here's the CSS: Code:
@charset "UTF-8";
/* CSS Document */
body {
width:100%;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height: 1.4;
background: url(../layout/bg.png);
background-attachment:fixed;
margin:0;
padding:0;
text-align: center;
}
a, a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #31636c;
text-decoration: none;
}
a.footer:link {
color: #ddcfb2;
}
a.footer:hover {
color: #ddcfb21;
}
a.footer:visited {
color: #ddcfb2;
}
a.footer:active {
color: #ddcfb2;
}
#page-wrap {
width: 100% ;
margin: auto ;
text-align: center;
}
#top {
width:100%;
background:url(layout/skybg.png);
background-repeat:repeat-x;
text-align: center;
position:relative;
z-index: 500;
}
#navbar {
width:100%;
height:102px;
margin-top:-139px;
padding-top:15px;
background:url(layout/navbg.png);
background-repeat:repeat-x;
}
#navigation {
width:100%;
height:155px;
text-align:center;
margin-top:-154px;
}
/* Everything CSS Sprite Menu */
ul#menu {
text-align:center;
position:relative;
z-index: 501;
padding:0;
list-style:none;
clear:both;}
#menu li{overflow:hidden;
text-indent:-9999px;
display:inline;
text-align:center;
float:left;
margin-right:10px;}
#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}
/* Owl Button */
#menu li.owl{width:158px; height:146px;}
#menu li.owl a{background-position:0px 0px;}
#menu li.owl a:hover{background-position:0px -2px;}
/* Contact Button */
#menu li.contact{width:150px; height:158px;}
#menu li.contact a{background-position:-158px 0px;}
#menu li.contact a:hover{background-position:-158px -2px;}
/* Portfolio Button */
#menu li.portfolio{width:238px; height:146px;}
#menu li.portfolio a{background-position:-308px 0px;}
#menu li.portfolio a:hover{background-position:-308px -2px;}
/* Home Button */
#menu li.home{width:114px; height:146px;}
#menu li.home a{background-position:-546px 0px;}
#menu li.home a:hover{background-position:-546px -2px;}
NEVER MIND. Got it. lol Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems. http:// www . sycwin . com / index2 . html My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects problems: 1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE 2. introduction not in position to the right of carousel/slideshow on IE 3. paints and wires divs are messed up in width, padding and margin on IE here's the css: Code: body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}
emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}
a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}
img {
border:none;
}
/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}
#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}
/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}
#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}
#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}
/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}
#preview img{
width:300px;
height:300px;
}
/*CAROUSEL*/
#carousel ul {
list-style: none;
width:3600px;
margin: 0;
padding: 0;
position:relative;
padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
display:inline;
float:left;
}
#carousel {
overflow:hidden;
I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this. |
|||||||