|
CSS - Can I Make These Divs Eqal Heights?
I'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. Similar TutorialsHello 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 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 have 2 divs one is a navigation bar, the other is the pages main contents. the contents and navigation links changes from page to page so i need a method so if the content is long, the navigation will stretch down long too to be the same height of the content, and the same thing vice versa. how do i go about doing this? Hi, Take a look at this page: http://nazgulled.home.sapo.pt/table.html This is easly done with tables as you can see, now, I want reproduce the same effect with divs but I don't know how. My exact problem is, how can I center more than 1 div tag in the same "line". And for any div tag I use the float option, I can't align the text to anywhere, how can I do this too? I am trying to make to div tags enclosed inside another div tag align horizontally. I am trying to do this without absolute positioning. See image below Any ideas? Thank you. Well, I'm trying to make a comments-page for a certain thing, and I can't get the image to stop going over the bottom of the div, without using the min-height property. Can someone help?
Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" />
<title>Comments on 2005-02-10: February 10, 2005</title>\n
<link rel="stylesheet" type="text/css" href="comments.css" />
</head>
<body>
<h2>Posting on 2005-02-10: February 10, 2005 in <a href="refresh.php" id="title">XMLBlog</a></h2>
<div id="entry" xml:lang="en-US" lang="en-US">
<img src="../resources/images/Neil_Euphonium_3_[F][S{600,h}][32k].png" alt="New Euphonium!" title="New Euphonium!" style="width:30%;" class="left" />
<p class="dream">I can only remember two things... That there were a whole bunch of people from my school playing baritones, which was kind of creepy in this case <em class="entry">and</em> that my section from school in real life and I played this freaky, nonexistent Zelda games. One was for a calculator I had only owned in the dream, and it was spectacular!
</p>
<p class="normal">I brought my "newphonium" to school today.</p>
<p class="normal">We had a pretty normal session in Jazz. <em class="entry">Someone actually got a trombone solo.</em></p>
<p class="normal">Our teacher was back. The entire first half of the period going over our homework. <em class="entry">We learned that dropping a penny off of the <strong class="entry">Space Needle</strong> is very dangerous, since even a baseball would get going at 120 MPH.</em> Later, we began how to calculate things dealing with gravity with a position other than 0 and a velocity over 0.</p>
<p class="happy">We didn't do much in Japanese. All we really did was read Katakana and finish our puzzle. <em class="entry">A few of us found new words.</em> I also told our sensei that my real Japanese same from my ancestors is <ruby><rb>たけした</rb><rt>take****a</rt></ruby>. During resource, I looked over this book with a couple of friends of mine and their friend. <em class="entry">It was so funny, too!</em></p>
<p class="normal">In Health, we continued our lecture on alcohol. <em class="entry">There were some inspiring articles and poems on the subject.</em></p>
<p class="happy"><span class="normal">Class started off with a lock-down. <em class="entry">I used this time to complete a gravity-based program for physics.</em></span> to Due to my premature completion of the paragraph that was due at the end of the period, I just listened to music and read for the majority of English. <em class="entry">A big guy in the <info popup="State of Fear">book I'm reading</info> died.</em></p>
<p class="sad">Before actually eating, I wandered a bit. <em class="entry">It made it so I didn't have to carry my backpack around wherever I went.</em></p>
<p class="normal">We continued on proofs. <em class="entry">It took a bit of effort to do.</em> <span class="happy">Still, we finished the investigation.</span></p>
<p class="normal"><span class="happy">I got my new euphonium for class.<em class="entry">It sounded very nice.</em></span> Though, for a majority of the time I didn't do anything with my section, due to his preoccupation with a couple of other kids.</p>
<p class="happy">I got a ride home</p>
<p class="normal">I had a practice session with my mom, which wasn't the most successful.</p>
<p class="happy">Once done with my homework, I took a two-hour nap.</p>
<p class="dream">The entire thing revolved around this country area that had tiny roads and a <info popup="The salmon eggs would get bigger, then would grow spikes and split apart before returning to their grating to mature more">freaky salmon farm</info>. Also, I remember psychically communicating with my section from Band. <span class="hider">I actually cried over the idea of losing him, but I didn't have tears when I awoke.</span> Also, my old friend, who is a freshman now, was mentioned.</p>
<p class="happy">The dream gave me the idea to call him up. <em class="entry">Apparently, the call woke him up.</em> We talked about how our lives were going, along with school. <em class="entry">Apparently, the school banned people from using their calculators. How could they!? He also told me that some kids were goofing around during Breakout library time.</em> We scheduled a time to meet and talk about some more things. <em class="entry">I could show him Linux.</em></p>
<p class="happy"><strong class="entry">I fixed the comments system!!</strong> <em class="entry">Have fun posting.</em></p>
</div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 10, 2005&date=2005-02-10" method="post" name="comment" id="main">
<div class="right">
<img src="comments_files/right_main_bar.png" alt="right_side" />
</div>
<div class="left">
<img src="comments_files/left_main_bar.png" alt="left_side" />
</div>
<div class="center">
Date: <input type="textarea" class="upper" name="date" value="2005-02-10" readonly="readonly" />
Title: <input type="textarea" class="upper" name="title" value="February 10, 2005" readonly="readonly" />
<br />
Name: <input type="textarea" name="name" class="lower" />
E-mail: <input type="textarea" name="e-mail" class="lower" />
</div>
<div class="comment">
<input type="textarea" name="comment" class="text" />
<input type="submit" value="Post!" class="click" />
</div>
</form>
</body>
</html>
CSS: Code: h2 {
text-align:center;
font:bold italic 3em/1.5 'Pepita MT', 'Lucida Handwriting', 'Sans-Serif';
color:rgb(0,150,150);
}
h3 {
text-align:center;
font: italic normal 2em/1.5 'Lucida Calligraphy', 'Sans-Serif';
color:rgb(0,0,150);
}
form#main {
display:block;
}
form#main div.left {
float:left;
background-color:rgb(255,255,255);
}
form#main div.right {
float:right;
background-color:rgb(255,255,255);
}
form#main div.left img, form#main div.right img {
height:60px;
}
form#main div.center {
background-color:rgb(0,0,0);
background:url(comments_files/center_main_bar.png);
font:bold normal 1em/1 'Times New Roman', 'Courier New', 'Sans-Serif';
color:rgb(255,255,255);
padding:2px 18% 2px 28%;
}
form#main div.center input.upper {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 10% 2px 0;
}
form#main div.center input.lower {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 8% 2px 0;
}
form#main div.comment {
width:95%;
border:1px solid rgb(0,150,150);
}
form#main div.comment input.text{
width:90%;
margin:5px 5% 5px 5%;
height:100px;
}
form#main div.comment input.click {
width:25%;
margin:5px 37.5% 5px 37.5%;
}
body p {
text-align:justify;
font: italic normal 1.2em/1 'MS Mincho', 'SimSun', 'Sans-Serif';
color:rgb(150,0,0);
}
a {
color:rgb(0,100,0);
text-align:left;
}
a:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
a#title {
color:rgb(0,100,0);
text-decoration:none;
margin-left 25%;
text-align:left;
}
a#title:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment a.mail {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,100,0);
text-decoration:none;
text-align:left;
}
div.comment a.mail:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment span.mail {
margin-left 25%;
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,0,150);
text-align:left;
}
div.comment {
border-bottom:2px dotted rgb(0,0,255);
margin:1.5em;
}
div.comment p {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
display:block;
}
/* ENTRY */
div#entry {
border:4px double rgb(0,0,0);
padding:0.25em;
margin:0.5em;
min-height:79em;
}
div#entry p {
font:normal normal 1em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
text-indent:2em;
text-align:justify;
}
div#entry p.dream {
font:normal normal 1em/1.2 'Lucida Handwriting', 'URW Chancery L', 'Serif';
color:rgb(150,150,0);
text-indent:2em;
text-align:justify;
}
em.entry {
font-style:italic;
}
strong.entry {
font-weight:bold;
}
span.uentry {
text-decoration:underline;
}
span.hider {
color:rgb(255,255,255);
}
div.story {
border-left:2px solid rgb(0,0,0);
border-top:2px solid rgb(0,0,00;
}
div.story div.title {
border-bottom:1px solid rgb(128,128,128);
border-right:1px solid rgb(128,128,128);
font:italic normal 1.5em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
width:50%;
text-align:center;
}
div.story div.storybody {
padding:0.25em;
}
span.happy, p.happy {
color:rgb(0,100,0);
}
span.sad, p.sad {
color:rgb(0,0,100);
}
span.normal, p.normal {
color:rgb(100,0,0);
}
img.center {
margin:0.25em auto;
}
img.right {
float:right;
margin:0.25em;
}
img.left {
float:left;
margin:0.25em;
}
Hi guys! Just wondering if this is an easy fix, otherwise I'll just switch the layout to a table. HTML: Code: <div id="box"> <div id="left"> <h1>MENU left</h1> <p>Content on the left.</p> </div> <div id="content"> <p> content... </p> </div> <div id="right"> <p>content...</p> </div> </div> CSS: Code:
#box {
width:750px;
margin: 0px auto;
padding:0px;
border:1px;
}
#content {
width:400px;
padding:0px;
float:left;
overflow: auto;
}
#left {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
#right {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
I want all three columns to expand vertically to the size of the largest column. As of right now it's set up using CSS and I would prefer to keep it that way, but if switching the layout to tables would be much easier, I would be happy to do that too. Thanks for the help in advance! 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 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.. 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? 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, 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? 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>
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? See: http://www.mandgweb.net/css_help/ I am trying to get the 'divs' of the 3 columns of content (A, B, C) to expand to the height of the tallest column (in this case 'A') while the height of the main container (blue border) expands/contracts as necessary to accommodate the tallest column. The main effect I am trying to achieve it to get the vertical rules between the columns to be the same height (i.e. the height of the tallest column). Easier said then done..? Thanks in advance. 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 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 |
|||||||