|
CSS - Scaling Heights Of Multiple Divs
Hello everyone, Ive been trying to reconstruct a web design from a photoshop design and it has bars going down the side of a center container where the content is, the problem im having is when the text and such in the content 'rule' goes over one line, prior to what i thought would happen, only the content 'rule' scales to the amount of text and the container rule does nothing. Is there a way to make the container scale with the content and have the bars scale with the container...?
Heres the css and the html Code:
#container
{
margin-left: auto;
margin-right: auto;
top: 0;
width: 875px;
margin-top: -8px;
padding: 0;
overflow: visible;
background: #FFFFFF;
}
#secondbar
{
margin-left: 102px;
margin-right: auto;
width: 40px;
top: 0;
position: absolute;
background: #4D220F;
}
#bar
{
margin-left: 6px;
margin-right: auto;
width: 96px;
top: 0;
position: absolute;
/*[empty]height:;*/
background: #E3C98E;
}
#thirdbar
{
margin-left: 123px;
margin-right: auto;
width: 21px;
top: 0;
position: absolute;
background: #7F8FA6;
}
#content
{
margin-left: 154px;
margin-right: auto;
top: 0;
width: 709px;
position: absolute;
background: #FFFFFF;
}
Code: <head> <title>Test</title> <link rel="stylesheet" type="text/css" href= "styles.css"> </head> <body bgcolor="f4f1ea"> <div id="container"><div id="bar"> </div><div id="secondbar"> </div><div id="thirdbar"> </div> <div id="content"> </div></div> </body> Thanks for any help, sorry if its a bit confusing Xidus Similar TutorialsI'm working on a new template for my site. I've just finished up the the basics for the layout but the two main divs aren't the same height. I know I can give the body a height and then give the divs a height but I want then I have to use overflow scroll which I don't want. I want the divs to be the same height but for the over all height to adjust to the size of the content. Is this possible? You can see the layout I have in the following gif. If anyone wants to see the code I've written so far, just ask and I'll upload a zip file or something. It's the divs with the screenshot link and the test text that I want to be the same height. I've not assigned height properties to either as just giving them height:100% properties seems to do nothing. Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs: Code: ___________________ |Image 1 |Text | |Image 2 |Text | | |Text | | |Text | ------------------- Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'. Outer 'table' style: None (just a plain <div>) Images 'cell' style: height:100%;float:left Text 'cell' style: height:100% Here's the full code if you want it: Code: <div>
<div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
<img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
<div style="height:100%"> [div 2] Shows text on the right <br>
<br>
continues downwards no matter how much text appears<br>
<br>
<br>
<br>
<br>
<br>
Even down here [/div2] <br>
</div>
</div>
This works great in i.e. but not mozilla, anyone have any ideas? i have two divs that are side by side and i want them to have the same height, but i will not know the height ahead of time as the content for at least one of the divs is dynamic (calendar list) and can contain no items up to as many items as there are time intervals in a day. the html for the section in question is Code: <div id="spotlight-wrapper">
<div class="spotlight">
<h3>Currently...</h3>
<div id="training" class="spotlight-sub">
<ul>
<li><strong>Running</strong> 3mi/4mi/3mi</li>
<li><strong>Bench Press</strong> 175lbs</li>
<li><strong>Deadlift</strong> 205lbs</li>
<li><strong>Squats</strong> 275lbs</li>
</ul>
</div>
<ul class="inline-list">
<li>
<a href="http://www.randomhouse.com/features/crichton/airframe/" title="Random House Publishing: Airframe">
<img src="/images/reading.png" alt="Airframe by Michael Crichton" />
</a>
</li>
<li>
<a href="http://www.google.com/musicl?lid=HnJbFL6nobL&aid=lqUKIAaw6tN&sa=X&oi=musiamp;c&ct=result" title="Google Music: Hinder - Extreme Behavior">
<img src="/images/listening.png" alt="Extreme Behavior by Hinder" />
</a>
</li>
<li>
<a href="http://en.wikipedia.org/wiki/300_(film)" title="300 the movie on Wikipedia">
<img src="/images/movie.png" alt="300 - Tonight We Dine In Hell" />
</a>
</li>
<li>
<a href="http://www.fox.com/house/" title="Fox's House M.D. starring Hugh Laurie">
<img src="/images/television.png" alt="House M.D. on Fox" />
</a>
</li>
</ul>
</div>
<div class="spotlight">
<h3>In the public...</h3>
<div id="calendar">
<ul id="events">
<li>
<strong>09/25 20:00 - 09/25 21:00</strong>
<br />House MD
</li>
<li>
<strong>09/26 16:00 - 09/26 17:00</strong>
<br />Weekly Tempo Run
</li>
<li>
<strong>09/26 17:30 - 09/26 18:30</strong>
<br />RPM (Christi)
</li>
<li>
<strong>09/27 06:00 - 09/27 07:30</strong>
<br />Weight Training
</li>
<li>
<strong>09/28 06:00 - 09/28 07:30</strong>
<br />Weight Training
</li>
<li>
<strong>09/28 08:30 - 09/28 09:30</strong>
<br />RPM (Lauren)
</li>
<li>
<strong>09/29 07:30 - 09/29 09:30</strong>
<br />Long Run
</li>
</ul>
</div>
</div>
</div>
and my unsuccessful attempt at the necessary css Code: div#spotlight-wrapper {
min-height: 317px;
}
div.spotlight {
width: 471px;
height: 100%;
float: left;
margin: 19px 12px 7px 0;
background: #373737;
overflow: hidden;
}
div.spotlight h3 { background: #555555; margin: 0; padding: 7px; }
here is a live sample I'm having a little problem with centering divs: I have a dynamic page that displays items. Each item has it's own div containing an image and a title. I want these divs to be centered but also to drop onto multiple lines if necessary, for example: There is room for 4 items per row within the container div, so one item would be centered, two items would be centered, and so on, but 5 items would have 4 divs on the top row and one div centered underneath: 1 item: [div] 2 items: [div][div] 4 items: [div][div][div][div] 5 items: [div][div][div][div] [div] 10 items: [div][div][div][div] [div][div][div][div] [div][div] and so on. I can get this to work by using float to automatically drop the next 4 onto the next row, but is there a 'center' attribute or technique I could use to keeps these divs centered? I hope this makes sense to you all!! I'm trying to get multiple DIV tags with an set layout, like [Example 1] to show in this [Example 2] but also scroll along when you click on the arrows now my issue is if I use position "position:absolute" the little colour boxes stay where they are? now if I use "position:relative" I have to put the "top:-500px" and the next box as "top:-1300px" etc. but they are the top line of boxes like aaa and ccc in the first link but I cant see this being the correct way of doing this? I'm completely lost any pointers into how to get this to work would be nice? Hi. I am a relative CSS newbie working on a new layout. My intended format is:
A sidebar (a div with no visible border) containing a set of smaller divs.
A main div for the content on the right.
About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is: Code: <div class="sidebar">
<div class="cv">
<font size="3"><b><center>
Current Version Info
</center></b></font>
</div>
<div class="ver">
<center>
Version:
<br/>
<b>0.0.0</b>
</center>
</div>
<div class="rel">
<center>
Released:
<br/>
<b>00/00/00</b>
</center>
</div>
<div class="nav">
</div>
</div>
<div class="main">
<center>
Lorum ipsum
</center>
</div>
The relevant CSS code is: Code: div.sidebar {
width: 202px;
float: left;
border: 0px solid #00CC99;
}
div.cv {
width: 200px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.ver {
width: 99px;
border: 1px solid #00CC99;
float: left;
background-color: rgb(33,33,33)
}
div.rel {
width: 99px;
border: 1px solid #00CC99;
float: right;
background-color: rgb(33,33,33)
}
div.nav {
margin-top: 30px;
width: 200px;
height: 100px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.main {
width: 500px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33);
float: right;
}
In particular, div.main and div.sidebar are the ones giving me trouble. What would you recommend? Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it. Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. I'm working on a very simple layout for a site right now, where there are two repeated images on either side of the content in div's, and obviously everything else in between. The problems I'm having a - getting the image div's to extend to the end of the page no matter what the height (currently they only fill the browser when the page is loaded, if the page goes further the images do not repeat) - getting the content div to take up all available space, so the footer div will always be at the bottom of the page, even if it is not vertically scrollable. Here's the code: 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" lang="en">
<head>
<title>The Website</title>
<style type="text/css">
html {
height: 100%;
}
body {
background-image: url(bg.jpg);
height: 100%;
margin: 0;
min-width: 1024px;
text-align:center;
}
#wrapper {
margin: auto;
align: center;
height: 100%;
width: 1024px;
}
#left {
background-image: url(sidebar-left.png);
height: 100%;
width: 32px;
float:left;
}
#center {
background-color: #AAAAAA;
height: 100%;
width: 960px;
float:left;
}
#right {
background-image: url(sidebar-right.png);
height: 100%;
width: 32px;
float: right;
}
#banner {
background-image: url(banner-pattern.jpg);
height: 100px;
}
#buttons {
background-color: #FFFFFF;
height: 20px;
border: 1px solid black;
}
#content {
border: 1px solid black;
height: 100%;
}
#footer {
background-color: #FFFFFF;
height: 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="center">
<div id="banner"></div>
<div id="buttons"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
<div id="right"></div>
</div>
</body>
</html>
I don't have it hosted anywhere right now but I think it's a relatively simple problem. I did search around for solutions for a while, but I couldn't find a fix. Yes, I am new to CSS / website design / not using tables to do things Greetings Not sure about the best way to go about this. I have an Unordered List that has a set height for the List Items. Like so: Code:
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left ul li {
text-align: center;
float: left;
margin-right: 20px;
height: 200px;
margin-bottom: 20px;
}
This works fine for most of the pages, but there is one where I really need the height of the <li>'s to be 350px. I tried just adding a class like Code:
.comics {
height: 350px;
}
I tried adding this to the <li> Code:
<li class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></li>
and also just a <span> Code:
<li><span class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></span></li>
but it still kept the 200px height. Do I need to make a whole new <li> code or am I missing something? Hi.. another question for the CSS mastas out there. I have a table taht I have applied a class to: PHP Code: <table class="middle" cellspacing="0" cellpadding="0" border="0"> <tr> <td> <img border="0" src="images/spacer.gif" width="1" height="1"> </td> <td align="left"> <p class="customHeading">aaaa</p> </td> <td> <p align="right"> <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> </p> </td> </tr> <tr> <td colspan="3" valign="top"> <table class="content" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="left">aaa:</td> <td><input type="text" name="aaa" size="22" class="formField"> </td> <td><a href="#"> <input type="submit" value="SEARCH" class="formButton"> </a> </td> </tr> </table> </td></tr></table> .middle { width: 760px; height: 360px; background-color: #FFFFFF; } .content { background-color: #FFFFFF; font: 13px Arial, sans-serif; padding: 2px; margin-left: auto; margin-right: auto; } The issue I'm having is that I can't seem to control the height of the outside tables first row. It seems to just take on a size depending on how I set the height in the element. Can I not place a height tag in the <td>'s for that row to set it at a fixed height? HI, I have the following tables: PHP Code: <table class="middle" cellspacing="0" cellpadding="0" border="1"> <tr> <td style="height: 1px;"> <img border="0" src="images/spacer.gif" width="1" height="1"> </td> <td align="left" valign="top"> <p class="customHeading">aaaa</p> </td> <td valign="top"> <p align="right"> <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> </p> </td> </tr> <tr> <td colspan="3" valign="top"> <form action="aaa.php" method="post" onsubmit="return validate(this);"> <table class="content" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="left">aaa:</td> <td><input type="text" name="issueNumber" size="22" class="formField"> </td> <td><a href="#"> <input type="submit" value="SEARCH" class="formButton" onmouseover="this.className='formButtonHover';" onmouseout="this.className='formButton';" > </a> </td> </tr> </table> </form> </td> </tr> </table> They use the following CSS classes: PHP Code: .middle { width: 760px; height: 360px; background-color: #FFFFFF; } .content { background-color: #FFFFFF; font: 13px Arial, sans-serif; padding: 2px; margin-left: auto; margin-right: auto; } My issues is this. In IE the row of the first table (where the hrefs are) expands to a seemingly arbitrary height, beyond the size of the text contained within it. In Netscape the row is only as high as the text contained within it. I want it to act the same in IE as it does in Netscape. Never thought I'd say that.. =) Any ideas? Hey, I was wondering how you set the height of a div so that the div will cover the full height of the page. currently i have: .navigationDiv{ position: absolute; width: 19%; height: 100%; } This fills the whole visible part of the document as it was loaded but once you start scrolling down its not filled anymore. how to fix this? thanks in advance? Hi, I'm new to the forum and very new to CSS, so please excuse my ignorance or any stupid fundamental mistakes I have made. I have almost got what I need to work, but my wrapper and the leftshade and rightshade div heights will not work with the height of the page. If I set them to a preset pixel height, they're fine, but when I set them to auto they disappear. I need them to be able to scroll to whatever the length of my content is going to be. I could really use some advice on how to sort this. Many thanks in advance. 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>Heading</title>
<style type="text/css">
<!--
body {
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background-color: #C2FFC1;
}
#wrapper {
width:960px;
height:auto;
margin-right: auto;
margin-left: auto;
}
#middle {
position:relative;
top:0px;
width:940px;
height:auto;
float: left;
background-color: #FFFFFF;
}
#leftshade {
top:0px;
width:10px;
height:600px;
float: left;
background-image: url(images/shadeleft.png);
background-repeat: repeat-y;
}
#rightshade {
top:0px;
width:10px;
height:600px;
float: left;
position: relative;
background-image: url(images/shaderight.png);
background-repeat: repeat-y;
}
#banner {
width:940px;
height:150px;
background-color: #FFFFFF;
}
#navbar {
width:940px;
height:50px;
background-color: #6DC072;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-bottom-color: #666666;
text-align: left;
vertical-align: middle;
}
}
#centre {
position:relative;
width:580px;
height:257px;
padding: 10px;
float: left;
}
#content {
width:940px;
height:auto;
background-color: #FFFFFF;
}
#contentleft {
position:relative;
width:150px;
height:auto;
float: left;
padding: 10px;
}
#contentmiddle {
position:relative;
width:580px;
height:auto;
padding: 10px;
float: left;
}
#contentright {
position:relative;
width:150px;
height:auto;
float: right;
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="leftshade"></div>
<div id="middle">
<div id="banner"></div>
<div id="navbar"></div>
<div id="content">
<div id="contentleft">
<p>f</p>
</div>
<div id="contentmiddle">
<p> </p>
</div>
<div id="contentright">
<p> </p>
</div>
</div>
</div>
<div id="rightshade"></div>
</div>
</div>
</body>
</html>
Hello, I have been writing a web page as a project for a course using XHTML. I have tested it with several browsers, including IE, Netscape, and Opera and validated its source code and CSS Style sheet. The site works at 1024 X 768 resolution. My problem is that if I minimize the window or change the screen resolution size every div element gets switched around and the display is destroyed. The page is currently located at http://student.flvs.net/html/millety/mod8/index2.htm . Please tell me how to fix this. The links on the page do not work as they should, so only look at the oage I have linked to. I would like the color behing the navigation to run in a vertical band all the way to the bottom of the page. The footer is supposed to be all the way at the bottom and the main text's background color should not appear under it, which is part of my current problem. Thank you in advance for your help. Hi, I have a dotted border that seperates my navigation bar from my content area. My question is since I had to remove a set height from my CSS IDs how to I get the border to extend all the way from the top blue bar all the way to my footer? It looks okay on the main page because it uses up all of the space but when you go to a page where the content does not take up the same height as the nav area the border does not extend all the way down. The border is currently set as border-right for the main content. If i set it to border-left for the nav bar it will display correctly on the shorter pages but only cover the nav bar for my longer pages. Any ideas on how to fix this problem? Its the last one! My site is located he http://www.venturingvortex.org the css is located he http://www.venturingvortex.org/Style/Master.css Well I've run into a few more snags and after all of my atempts to learn this **** on my own I failed and need help... keep this in mind... My only table named capsule is defined like so: index.php Code: <body> <table class="capsule"> default.php Code:
.capsule
{
border-collapse:seperate;
border-spacing:0;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
width:100%;
height:100%;
}
My "biggest" concern I'm trying to make a site that is at least supported on all resolutions supported by my monitor, 800x600 to 1600x1200. I also plan to include 640x480 but my monitor doesn't go that low so I'm hoping it looks nice, as if anything could look nice at 640x480, when the other resolutions are tested. I found a few solutions to this but unfortunatly none of them worked for strict xhtml. Most of them used the tagline height attribute and tagline margin attributes. I substituted the tagline html for CSS like this: Code:
body
{
margin:0;
}
This didn't work, you might have guessed that... I know with an object and static sizes, like something defined in px, can use the overflow scroll property. But that's static sizes and limited in resizing features. Here is the code I got my ideas from: [code] <BODY leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#000000" alink="#CDCDCD" vlink="000000"> <TABLE border="0" cellpadding="0" cellspacing="0" height="100%"> [code] I looked for an alternate to margin-height and margin-width with no luck. Another "issue" spacing in cells. I hate IE, yet another problem that is ONLY visible in IE, not opera no mozilla, firefox, galleon, konquor. Wha thappens is, gayness spacing. I have the following CSS and this worked in every browser but IE 6.0. Unfortunately, since MS is a big part of the computer world, I can't just NOT support it. See .capsule above. According to w3schools this should work from IE5+. One more "thing" ...a little off topic, just a lil' I always thought that Opera used the IE engine but Opera, IMO is better than IE. It just, works. All this for well you know...ugly sites suck... Any responses to any of these topics or to further expand on the are more than welcome!!! PS When I came to this site it said 404 NOT FOUND. I tried again it worked. I then tried NEW THREAD and again the same thing. I tried again and it worked. I said "F* this ****" cleared cache etc and tried again. Still the same problem. Any new place I vist from this visit on, I think, is going to be a pain, all of my old bookmarks will have to be updated somehow...I don't know what this is. Any button I hit, preview post, ad links, save changes, submit thread, etc.. all do the same thing. Some admin might be interested in this... Once I do it once it doesn't happen for that action anymore. Hi, I have this border on the right hand side of my table and i was wondering, how do i reduce its height as i don't want it going right from the top to the bottom? border-top: 1px solid #6593B8; any help is appriciated, Thanks |
|||||||