"Equal height" columns?
Hi,
I've been trying to figure this out in both Muse and Dreamweaver...
Anyway, here it is:
I have a setup where I have a "menu column" that's 200 px wide, filled gray, and a "main content" area that's 760 wide, filled white.
I need the main column to expand vertically when content is added (which it does), but also need the "menu" column to match up along with the height of the "main content" column.
How do I do this?
I assume there are several ways to do this... anything would help.
thanks,
Andrew
@Al
Actually I was hoping that you would not see my post, it took courage to say what I did .
In case anyone is interested, you can see the full power of the commercial extension here http://www.youtube.com/watch?feature=player_embedded&v=xUQ_nBQZdtk
Similar Messages
-
How do I create Equal Height Columns with my Background Images?
Hi there,
here is my page http://www.allthingsprintuk.co.uk/ATPHome.html
My problem is that the side bar HTML list is coming off the page in IE. & also the html in the header can look awful due to browser settings.
My question is how do I create Equal Height Columns with my Background Images so that they fit with the HTML text? Is there a good link you can point me to, or a tutorial?
The only way I can see by doing it is slicing my images up into 3 (top middle & bottom) & then setting the middle to repeat y????
Or does anyone know of a way to create rounded corners WITH drop shadows in CSS that will work on all browsers?
Thanks in advance
LouisaTry these http://www.pixelan.com/
-
How to make my 4 articles (2 columns) have equal height?
Please take a look at my live example: http://jsfiddle.net/mdermez32/vTynd/
If you see my link you'll notice that the cells on the right are shorter than the left.. what is wrong in my code? how can I make their height equal?
HTML:
<table class="art-article" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<col width="50%" />
<col width="50%" />
<tbody>
<tr>
<td><table class="metaart" width="100%" border="0">
<tbody>
<tr>
<th class="titlebox" align="justify" background="./images/backgroundxa.png"; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM </span></span><span style="color:rgb(235, 81, 5);"><a href="./services/operating-systems.html"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">IPSUM</span></span></a><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;">; </span></span></span></span></span></span><span style="font-size:20px;"></span></th>
</tr>
<tr>
<td> <img src="./images/win7-logo.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
</tr>
<tr>
<td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
</tr>
</tbody>
</table></td>
<td> <table class="metaart" width="100%" border="0">
<tbody>
<tr>
<th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
</tr>
<tr>
<td> <img src="./images/ubbuntu.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
</tr>
<tr>
<td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><table class="metaart" width="100%" border="0">
<tbody>
<tr>
<th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
</tr>
<tr>
<td> <img src="./images/brands.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
</tr>
<tr>
<td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p style="text-align:right"><strong><a href="./services/laptop.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
</tr>
</tbody>
</table></td>
<td><table class="metaart" padding=10px; width="100%" border="0">
<tbody>
<tr>
<th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="font-size: 20px; color: rgb(61,60,51)">LOREM IPSUM DOLOR </span></span></th>
</tr>
<tr>
<td> <img src="./images/farmacy.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
</tr>
<tr>
<td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
<p style="text-align:right"><strong><a href="./services/medical-software.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table><br />
</div>
<div class="cleared"></div>
</div>
The css code for the shadow effect and the gradient in the title is in the css section at the btm.
What I am trying to do is to make my tables have equal height. As you can see the height of the right tables/cell is smaller than the left ones.
Second question.. where should I put code for padding in order to increase the space between text and it's box.Not to disparage Jon's example in any way. It works great. But I prefer to use HTML5 tags wherever possible because they add semantic meaning & structure to your content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Table</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
body {
background: #333;
color: #FFF;
font-size: 62.50%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#wrapper {
width: 900px;
margin: 0 auto;
background: #069;
header { border-top: 4px solid #F93 }
section { /**for equal height columns**/ display: table-row; }
article {
/**for equal height columns**/ display: table-cell;
text-align: left;
vertical-align: top;
background: #FFF;
color: #000;
footer {
position: relative;
text-align: center
footer aside {
width: 33.33%;
float: left;
color: #FFF;
background: #069;
text-align: center;
h1, h2, h3, p { padding: 0 12px 0 12px; }
h3 {
background: #F90;
color: #000;
width: 50%;
border-radius: 15px;
line-height: 26px;
</style>
</head>
<body>
<!--IE8 End of Life-->
<!--[if lt IE 9]>
<h2>You are using an out of date browser which limits your web experience.
For best results, please use a newer browser.<h2>
<![endif]-->
<div id="wrapper">
<header> <h1>XYZ Company Name</h1>
<h2>Demo of CSS Display: Table Properties</h2>
<nav>Your menu goes here...</nav>
</header>
<section>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
</article>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
</article>
</section>
<section>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
</article>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
</article>
</section>
<footer>
<aside><p>Footer aside</p>
</aside>
<aside><p>Footer aside</p>
</aside>
<aside><p>Footer aside</p>
</aside>
<p>© 2013 Footer text</p>
</footer>
<!--end wrapper-->
</div>
</body>
</html>
Nancy O. -
Floating divs made to have equal heights
Hi all
Is there a CSS way to get two divs (that will have different
lengths of
text) to have the same height. If not CSS what other
techniques are there to
achieve this - or is it not possible
Thanks
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news hereThanks Osgood - I did not think of the faux column option and
using it for
divs - I'll check that out - thanks
Thanks for the P7 link too
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here
"Osgood" <[email protected]> wrote in
message
news:gbg62d$14n$[email protected]..
>B wrote:
>> Hi all
>>
>> Is there a CSS way to get two divs (that will have
different lengths of
>> text) to have the same height. If not CSS what other
techniques are there
>> to achieve this - or is it not possible
>>
>> Thanks
>>
>
> You can use javascript, read this article about eqaul
height columns
>
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
>
> or you can wrap the two floated <divs> in another
<div> and use a
> repeating background image, google 'faux columns' -
My display has turned into 3 equal scrambled columns
Did my graphics card just bite the dust? I was watching a QuickTime video. The video started distorting, and now the display shows 3 equal columns (the outer columns are the same, the middle column is a different color) with symmetrical scrambled lines.
See picture: http://www.flickr.com/photos/28535101@N03/5539983950/
I just got this Mac last night!! -
I am trying to use example from projectseven:
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm.
It looks ok in firefox, but does not in IE . The left sidebar does
not equal maincontent div. Your help would be appreciated and if
you have a easy fix that would be great. Thanks. DenAlso, XHTML requires "onload" rather than onLoad.
Change this:
<body
onLoad="P7_equalCols2(1,'sidebar','P','maincontent','P')">
to this:
<body
onload="P7_equalCols2(1,'sidebar','P','maincontent','P')">
John
"carbiz" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to use example from projectseven:
>
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm.
It
> looks
> ok in firefox, but does not in IE . The left sidebar
does not equal
> maincontent
> div. Your help would be appreciated and if you have a
easy fix that would
> be
> great. Thanks. Den
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <title>PVII Equal Height Columns</title>
> <script type="text/javascript"
src="p7_eqCols2_10.js"></script>
> <style type="text/css" media="screen">
> <!--
> body {
> background-color: #FFFFFF;
> color: #333333;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 100%;
> margin: 20px;
> padding: 0;
> min-width: 730px;
> }
> h1 {
> margin: 0;
> clear: both;
> }
> #wrapper {
> margin: 0 auto;
> width: 760px;
> }
> #sidebar {
> border: 1px solid #333;
> font-size: 0.75em;
> padding: 16px;
> width: 150px;
> float: left;
> background-color: #FF9900;
> height: 750px;
> background-image: url(IMAGES/sidebarfiller.png);
> background-repeat: repeat-y;
> }
> h2 {
> margin: 0
> }
> #maincontent {
> border: 1px solid #333;
> font-size: 0.8em;
> padding: 16px 30px;
> width: 508px;
> float: right;
> }
> #maincontent h3 {
> margin: 36px 0 6px;
> }
> #footer {
> color : #999999;
> font-size: 0.75em;
> padding-top: 6px;
> clear: both;
> }
> #footer p {
> margin: 0;
> }
>
> /*NAVIGATION BAR*/
> #navbar {
> margin: 0;
> padding: 0;
> }
> #navbar li {
> list-style-type: none;
> margin: 0 0 6px 0;
> }
> #navbar a {
> display: block;
> padding: 3px 6px;
> color: #FFFFFF;
> text-decoration: none;
> background-color: #F49300;
> border: 1px solid #333333;
> }
> #navbar a:hover, #navbar a:active, #navbar a:focus {
> color: #333333;
> background-color: #FFFFFF;
> }
> #uberlink {
> color: #333333 !important;
> font-weight: bold;
> background-color: #FFFFFF !important;
> }
> -->
> </style>
> <!--[if IE 5]>
> <style>
> body {text-align: center;}
> #wrapper {text-align: left;}
> #sidebar {width: 182px;}
> #maincontent {width: 570px;}
> </style>
> <![endif]-->
> <!--[if lte IE 6]>
> <style type="text/css">
> #navbar a {height: 1em;}
> </style>
> <![endif]-->
> </head>
> <body
onLoad="P7_equalCols2(1,'sidebar','P','maincontent','P')">
>
> <div id="wrapper">
>
> <h1>masthead</h1>
>
> <div id="maincontent">
> <h2>layout examples</h2>
> <p>A re-engineering of your current world view
will reaffirm your online
> presence enabling a more effervescent solution.
Upscaling voluminous
> networking
> exchange solutions will result in your achieving an
excellent systemic
> electronic data interchange synchronization, thereby
exploiting technical
> environments for mission critical broad-based
capacity-constrained
> systems.
> This will fundamentally cause a morphing into a well
designed and
> actionable
> information infrastructure whose semantic content is
downright null. To
> more
> fully clarify the current concept, a few aggregate
issues will require
> addressing to facilitate a distributed communication
venue. In integrating
> non-aligned structures into existing legacy systems, an
even more
> effervescent
> (bubbly) gateway blueprint in a backward compatible
package of tangible
> and
> immeasurable strategic value will result in right-sizing
the conceptual
> frameworks, but only when thinking outside the box. This
being said, the
> ownership issues inherent in dominant thematic
implementations cannot be
> understated vis-a vis David Bowie, for
instance.</p>
> <h3>additional content</h3>
> <p>A re-engineering of your current world view
will reaffirm your online
> presence enabling a more effervescent solution.
Upscaling voluminous
> networking
> exchange solutions will result in your achieving an
excellent systemic
> electronic data interchange synchronization, thereby
exploiting technical
> environments for mission critical broad-based
capacity-constrained
> systems.
> This will fundamentally cause a morphing into a well
designed and
> actionable
> information infrastructure whose semantic content is
downright null. To
> more
> fully clarify the current concept, a few aggregate
issues will require
> addressing to facilitate a distributed communication
venue. In integrating
> non-aligned structures into existing legacy systems, an
even more
> effervescent
> (bubbly) gateway blueprint in a backward compatible
package of tangible
> and
> immeasurable strategic value will result in right-sizing
the conceptual
> frameworks, but only when thinking outside the box. This
being said, the
> ownership issues inherent in dominant thematic
implementations cannot be
> understated vis-a vis David Bowie, for
instance.</p>
> <p>A re-engineering of your current world view
will reaffirm your online
> presence enabling a more effervescent solution.
Upscaling voluminous
> networking
> exchange solutions will result in your achieving an
excellent systemic
> electronic data interchange synchronization, thereby
exploiting technical
> environments for mission critical broad-based
capacity-constrained
> systems.
> This will fundamentally cause a morphing into a well
designed and
> actionable
> information infrastructure whose semantic content is
downright null. To
> more
> fully clarify the current concept, a few aggregate
issues will require
> addressing to facilitate a distributed communication
venue. In integrating
> non-aligned structures into existing legacy systems, an
even more
> effervescent
> (bubbly) gateway blueprint in a backward compatible
package of tangible
> and
> immeasurable strategic value will result in right-sizing
the conceptual
> frameworks, but only when thinking outside the box. This
being said, the
> ownership issues inherent in dominant thematic
implementations cannot be
> understated vis-a vis David Bowie, for
instance.</p>
> </div>
>
> <div class="columns" id="sidebar">
> <ul id="navbar">
> <li><a href="col2fixed.htm"
id="uberlink">2-col fixed</a></li>
> <li><a href="col4fixed.htm">4-col
fixed</a> </li>
> <li><a href="col2fluid.htm">2-col
fluid</a></li>
> <li><a href="col3fluid.htm">3-col
fluid</a></li>
> <li><a href="index.htm">Return to
Article</a></li>
> </ul>
> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam
> nonummy
> nibh euismod tincidunt ut PVII excelsior magna aliquam
erat very cool. Ut
> wisi
> enim ad minim veniam, quis nostrud exerci tation
suscipit lobortis nisl ut
> aliquip ex ea commodo sound asleep.</p>
> <p> </p>
> </div>
>
> <div id="footer">
> <p>© Copyright information here
</p>
> </div>
>
>
> </div>
>
> </body>
> </html>
> -
Hello good people!
Need a little bit newbie type help for working on CSS.
Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META content="text/html; charset=windows-1257" http-equiv="Content-Type">
<TITLE>
</TITLE>
<STYLE type="text/css">
body {
background-color:#FFFFFF;
margin-top:50px;
#container {
width: 750px;
margin: 0px auto 0px auto;
#header {
background:#CCCCCC;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
#left {
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:130px;
padding:10px;
float:left;
height:auto;
#center{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:430px;
padding:10px;
float:left;
#right{
background:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
margin-bottom:2px;
width:130px;
padding:10px;
float:right;
#footer{
background:#CCCCCC;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin-top:2px;
clear:both;
</STYLE>
</HEAD>
<BODY>
<div id="container">
<div id="header">This is header.</div>
<div id="left">Some text on left. It's good to see it.</div>
<div id="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent massa massa, mattis eget rhoncus ut, egestas eget orci. Fusce hendrerit tempor nibh quis gravida. Donec vehicula est tristique massa facilisis nec tempus augue porttitor. Aliquam erat volutpat. Nulla pellentesque, nibh vel auctor ultrices, tellus eros gravida tellus, vehicula volutpat odio dui vel tortor. Cras semper risus in felis rhoncus adipiscing. Vivamus feugiat facilisis varius. Pellentesque venenatis lectus sem, tincidunt placerat mi. Aliquam interdum ultrices dui. Nam vitae ante et massa lobortis facilisis sed id libero. Aenean ac porta lectus. Donec euismod condimentum quam eu viverra. Sed consequat massa vel elit condimentum eleifend nec at nunc. Donec lacus velit, euismod quis elementum vel, tempor tincidunt mi. Pellentesque odio nunc, tempor dapibus.</div>
<div id="right">It is the right column.</div>
<div id="footer">This is some piece of text in the footer.</div>
</div>
</BODY>
</HTML>
And the question is:
The problem is, that I can not make #left and #right to be set to the same height as the #center div. Please help.
Thank you.
MykolasEqual height CSS columns are challenging because divisions do not speak to each other. Their height is determined by content and can vary from page to page and by end-user's browser settings.
You have three options:
1) Start your project with a special template that provides for equal height CSS columns:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
2) Fake it with a 2 or 3-toned background image that repeats vertically down the page. This method is called Faux Columns.
http://alt-web.com/TEMPLATES/2-column-fixed-width-template.shtml
3) Use a Javascript.
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Hi all,
I have a website that uses table. I am trying to setup a template in CSS so I can convert over from table format. Below is my my css and html. I have 3 questions.
1) How do I make it so all three columns stay the same height or expand to be the height of the longest?
2) The text, if long enough, in each column will flow into the other columns/divs. How do I make the text wrap and stay in the proper div?
3) It appears that I have a gap between column 3 (right column) and the footer. Do I have something set making this happen (I don't want a gap).
I have the float clear indicated in my footer css. I don't know if that is the proper place to have it (don't know much about clearing floats) or if that is causing some of my problems.
Thanks in advance....Chris
CSS:
<style type="text/css">
<!--
#wrapper {
background-color: #006;
width: 100%;
#wrapper2 {
width: 80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #CCC;
#footer {
width: 100%;
background-color: #06F;
clear: both;
#topbar {
background-color: #903;
#left_column {
background-color: #FFF;
float: left;
width: 20%;
text-align: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
#main_content {
background-color: #9F3;
float: left;
width: 60%;
#right_column {
background-color: #66C;
float: left;
width: 20%;
#topheader {
background-color: #06C;
-->
</style>
HTML:
<body>
<div id="wrapper">
<div id="topbar">Search Bar/Links/Contact Us/ Date</div>
<div id="wrapper2">
<div>Logo Goes Here</div><div>SWF Goes Here</div>
<div>navigation bar goes here</div>
<div id="left_column">
<p>Left Column</p>
</div>
<div id="main_content">
<p>Main Content</p>
</div>
<div id="right_column">
<p>Right Column</p>
</div></div>
<div id="footer">footer</div>
</div>
</body>Example 3-column CSS layout:
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
CSS divisions do not produce equal height columns. You'll need to trick the eye into thinking they are equal buy using a repeating background-image that tiles down the page. This technique is called Faux Columns.
You can see a crude example here:
http://alt-web.com/TEMPLATES/3-col-white-gray.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
I'm working on a e-commerce template. It has different columns. Problem is Column 1 - nav columns and Column 2 - content can vary in height. I want to put a div around both that will auto size for height if one or the other column pushes it down so there will be all one unbroken area. Here's an example of Column one extending past Column 2.
Appreciate the help. I'm already behind getting this site up.Wrap your floated divisions inside a #container or #wrapper division and apply overflow:hidden. This will contain your floats.
The magic of overflow hidden:
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
Equal Height Columns (3 solutions):
http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
I have a web page that looks perfect in Dreamweaver and also using browser previews in Dreamweaver but when I view the page with any browser (outside of DW) the bottom of the columns are not even and the background image shows. I have uploaded all the files to a folder on Google docs since I thought posting the code here would be too long.
I have included the index.html file as well as the css file and most of the images.
https://docs.google.com/leaf?id=0B3JGyktK42m-MjIzNTUzNWYtMzFlZi00YWU0LTg3ZjctMzY5MjJkYmU5N jE2&hl=en
I also have two screenshots of the problem - the first one in Dreamweaver where the bottom is correct, and the other in IE8 where the bottom is uneven.
Now the bad one:
Any help would be appreciated - I just don't understand why it looks perfect in Dreamweaver and not in the browsers. What am I doing wrong?
I also have a terrible time with the float:left and float:right not seeming to do what tutorials says it will do.For Equal Height CSS Columns, you have three options:
1) Start your project with a special template that provides for equal height CSS columns:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser- css-no-hacks
2) Fake it with a 2 or 3-toned background image that repeats vertically down the page. This method is called Faux Columns.
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
3) Use a Javascript.
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Also, see float clearing ~ http://css.maxdesign.com.au/floatutorial/clear.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Dreamweaver CS3 3 column CSS footer issue
Has anyone used the Three Column Absolutely Positioned Header
and Footer (thrColAbsHdr) CSS template in Dreamweaver CS3? If so,
has anyone figured out how to address issue of Sidebar1 and
Sidebar2 content floating over top of the footer (instead of
growing and pushing the footer down)?
Adrian Senior appears to have addressed it regarding the
twoColElsLtHdr CSS...
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_cs3.html
I've tried his suggestion and it still doesn't appear to be
working properly with this CSS/template (thrColAbsHdr).Example 3-column CSS layout:
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
CSS divisions do not produce equal height columns. You'll need to trick the eye into thinking they are equal buy using a repeating background-image that tiles down the page. This technique is called Faux Columns.
You can see a crude example here:
http://alt-web.com/TEMPLATES/3-col-white-gray.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Which is best way toalign divs at bottom?
I am hopefully getting near to completing my layout for webste and I am trying to build it as follows:-
First I created a wrapper div to contain everything.
Next I created a header div in which I will put my logo image jpeg as a background.
Then I created a navbar div whch will contain navigation.
I wil save above as a template as most of this should not change. All above divs are 960px wide with margins 0 auto 0 auto
All the above has been achieved and would appear to be ok
What I am trying to do now is create a mainbody div and in it two divs which by using float left and float right have managed to both divs aligning at top of mainbody div. One div is called leftbody and the other called rightbody. I have given mainbody div a red background, leftbody a blue background and rightbody a green background in order to view what s happening.
I am wanting to enter text and images to rightbody and leftbody.
When the text in leftbody goes farther down the page than the text in rightbody , the red background from mainbody appears below the green background of rightbody which is fine.
But when the text in rightbody goes farther down the page than the text in leftbody, the red background from mainbody does not appear.
How do I fix this so that the red background appears?
and can I sort it so that if one dv is longer than the other, it creates a green or blue space to align the divs at the bottom
I am sorry if this is a bit long winded but I am trying to make my question clear - hopefully the answer will be clear also.
My code and css is as follows if it helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id ="wrapper">
this is wrapper div
<div id="header">Content
for id "header" Goes
Here</div>
<div id="navbar">this
is navbar div wrapped
inside wrapper div</div>
<div id="mainbody">Content
for id "mainbody" Goes
Here
<div id="bodyright">
<p>Content
for id "bodyright" Goes
Here GReen writing
goes here Content
for id "bodyright" Goes
Here GReen writing
goes here Content
for id "bodyright"</p>
</div>
<div id="bodyleft">Content
for id "bodyleft" Goes
Here Content
for id "bodyleft" Goes
Here Content<br>
for id "bodyleft" Goes<br>
<br>
</div>
</div>
</div>
</body>
</html>
/* CSS Document */
#wrapper {
background-color: #FFFF00;
width: 960px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#navbar {
background-color: #FFFF00;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#header {
background-color: #FF6666;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#mainbody {
background-color:#FF0033;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#bodyright {
background-color: #66FF00;
float: right;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#bodyleft {
background-color:#0000FF;
width: 200px;To achieve the illusion of equal height columns, create a tri-colored background image (see my example), same width as your #wrapper div, and repeat-y.
BEFORE FAUX COLUMNS:
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
AFTER FAUX COLUMNS:
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Footer now floating in middle of page and no background color
Hello all,
Been working on this for days with no luck. I hope someone can spot the silly mistake, because I know it has to be something silly but it's driving me round the bend! The page has always been just fine until I recoded part of the body (the four columns with titles, photos, and text) to help with 508 compliance. Since then, the orange footer that was firmly at the bottom has started floating half way up the page and the background orange color has disappeared.
I've gone through my code line by line, marking off each beginning and ending div tag and everything is fine there. Below, is a screenshot of the lower half of the page showing how the footer should look.
Here is a screenshot of how it looks offline right now:
as you can hopefully see, the footer has lost it's orange background and is sitting halfway up the page.
Here is the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1100">
<meta name="keywords" content="Meadows museum, Southern Methodist university, SMU, Dallas, Texas, Algur Hurtle Meadows, The Meadows Foundation, Dr. Mark A. Roglán, medieval, baroque, tenth to twentieth century spanish art, 10th to 20th century Spanish art, Spanish art collection, Spanish paintings, Meadows school of art, masterpieces, world's greatest painters, El Greco, Velázquez, Ribera, Murillo, Goya, Miró, Picasso, Juan Gris, Renaissance, altarpieces, rococo oil sketches, polychrome wood sculptures, Impressionist landscapes, modernist abstractions, sculptures, twentieth-century sculptors, Rodin, Maillol, Giacometti, Henry Moore, David Smith, Claes Oldenburg, James Surls, Santiago Calatrava, Texas artists, Frank Reaugh, Jerry Bywaters, Otis Dozier, Alexandre Hogue, William Lester, exhibitions, education, educational workshops, lectures, gallery talks, symposia, symposium, museum shop, Spain's Golden Age, neo-Palladian structure, Jones Great Hall, Founder's Room, auditorium, Gates Restaurant, Moss Chumley Award, William B. Jordan internships, Fortuny, Sorolla, Steve Mumford, Don Quijote, eighteenth-century tapestries, Roger Winter, Stanley Marcus, Mark Lemmon, The Barrett Collection, Mexican art, DeGolyer Library, greek vase painting, Juan van der Hamen y León, Division of Cinema-Television, musical and danse performances, performing artists, studio art activities, storytelling, artist demonstrations, community education, Spanish discussion and book club, Master of Liberal Arts courses, MLA program, corporate membership, Museum membership, Museo Nacional del Prado, Prado Museum Designer=Pam Muirheid">
<meta name="description" content="The Meadows Museum is committed to the advancement of knowledge and understanding of art through the collection and interpretation of works of the greatest aesthetic and historical importance, as exemplified by the founding collection of Spanish art">
<meta name="robots" content="index, follow">
<title>Home – Meadows Museum</title>
<meta name="google-site-verification" content="WJGKz4uefsWUilZUdPa5ggL23MSk1IsHeLMzUz3B1QE" />
<style type="text/css">
<!--
body {
background-color:#
a:link {
color: #505262;
text-decoration: underline;
a:active {
color: #505262;
text-decoration: underline;
a:visited {
color: #505262;
text-decoration: underline;
a:hover {
color: #505262;
text-decoration: none;
-->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="ajxmenu1.js" type="text/javascript"></script>
<style type="text/css">
<!--
.style1 {
color: #FFFFFF
-->
</style>
<link rel="stylesheet" href="ajxmenu1.css" type="text/css" />
<style type="text/css">
<!--
.style23 {
font-size: 10px
-->
</style>
<link rel="stylesheet" href="ajxmenu3.css" type="text/css" />
<link rel="stylesheet" href="ajxmenu4.css" type="text/css" />
<style type="text/css">
<!--
.style24 {
color: #AE543C
.style26 {
color: #f1efe0
.style27 {
color: #b6241d
-->
</style>
<link rel="stylesheet" href="ajxmenu8.css" type="text/css" />
<link rel="stylesheet" href="ajxmenu13.css" type="text/css" />
<style type="text/css">
<!--
.style28 {
color: #AF4D33
.style29 {
font-family: Geneva, Arial, Helvetica, sans-serif
-->
</style>
<link rel="stylesheet" href="ajxmenu16.css" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32262060-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript" language="javascript">AC_FL_RunContent = 0;</script>
<script type="text/javascript" src="slideshow/AC_RunActiveContent.js" language="javascript"></script>
<script type="text/javascript" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">
<!--
function errorSafe() {return true;}
window.onerror = errorSafe;
function newWin(url,name,rs,sc,mn,tl,lo,wd,hi) {
openWindow = window.open(url,name,'resizable='+rs+',scrollbars='+sc+',menubar='+mn+',toolbar='+tl+',lo cation='+lo+',width='+wd+',height='+hi);}
name.window="menu"
function open_window(url) {
email = window.open(url,"eMail","toolbar=5,location=0,directories=0,status=1,menubar=0,scrollbars =yes,resizable=yes,width=800,height=600");
//-->
</script>
<script src="ajxmenu1.js" type="text/javascript"></script>
<script src="ajxmenu3.js" type="text/javascript"></script>
<script src="ajxmenu4.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<script src="ajxmenu8.js" type="text/javascript"></script>
<script src="ajxmenu13.js" type="text/javascript"></script>
<script src="ajxmenu16.js" type="text/javascript"></script>
<!-- Google Translator start-->
<meta name="google-translate-customization" content="9966f40ce63f3936-63b7db40478c71ff-g3ab4db8eb77d6f75-1b">
</meta>
<!-- Google translator end -->
</head>
<body bgcolor="#f1eee1">
<div class="hidden">Skip to main content.</div>
<!-- begin logo-->
<div id="logo">
<header role="banner"><a href="http://smu.edu/meadowsmuseum/">Home Page - Meadows Museum</a></header>
</div><!-- end logo -->
<!-- begin navbackground-->
<div id="navbackground">
<!-- begin nav-->
<div id="nav">
<div class="AJXCSSMenuBOOIZUD"><!-- AJXFILE:ajxmenu1.css -->
<ul>
<li class="tsub"><a class="ajxsub" href="mission_statement.htm">About Us</a>
<ul>
<li><a href="mission_statement.htm">Mission Statement</a></li>
<li><a href="Director.htm">Message from the Director</a></li>
<li><a href="contacts.htm">Contact Us</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="media.htm">Multimedia</a></li>
<li><a href="history.htm">Museum History</a></li>
<li><a href="Plaza.htm">Plaza & Sculpture Garden</a></li>
<li><a href="Moss_Chumley.htm">Moss/Chumley Award</a></li>
<li><a href="javascript:open_window(%27http://www.meadows.smu.edu%27)">Meadows School of the Arts</a></li>
<li><a href="javascript:open_window(%27http://www.smu.edu%27)">Southern Methodist University</a></li>
</ul>
</li>
<li class="tsub"><a class="ajxsub" href="visit.htm">Visit Us</a>
<ul>
<li><a href="visit.htm">General Information</a></li>
<li><a href="tours.htm">Groups & Tours</a></li>
<li><a href="access_programs.htm">Accessibility</a></li>
<li><a href="shop.htm">Museum Shop</a></li>
<li><a href="students_teachers.htm">K-12 Resources</a></li>
<li><a href="dining.htm">Dining</a></li>
<li><a href="lodging.htm">Lodging</a></li>
<li><a class="ajxsub" href="events.htm">Facility Rentals</a>
<ul>
<li><a href="events_rental_images.htm">Rental Facility Images</a></li>
</ul>
</li>
</ul>
</li>
<li class="tsub"><a class="ajxsub" href="collections_intro.htm">Collections</a>
<ul>
<li><a href="collections_intro.htm">About the Collections</a></li>
<li><a class="ajxsub" href="collections_highlights.htm">Highlights of the Collections</a>
<ul>
<li><a href="collections_highlights_Algur.htm">Algur H. Meadows Collection</a></li>
<li><a href="collections_highlights.htm">Meadows Museum Collection</a></li>
<li><a href="collections_highlights_sculpture.htm">Elizabeth Meadows Sculpture Coll.</a></li>
</ul>
</li>
<li><a href="collections_provenance.htm">Provenance & Research</a></li>
<li><a class="ajxsub" href="#">Recent Acquisitions</a>
<ul>
<li><a href="collections_acquisitions_Goya.htm">Goya</a></li>
<li><a href="collections_acquisitions_Barcelo.htm">Barceló</a></li>
<li><a href="collections_acquisitions_Madrazo.htm">Madrazo</a></li>
<li><a href="collections_acquisitions_Munoz.htm">Muñoz</a></li>
</ul>
</li>
</ul>
</li>
<li class="tsub"><a class="ajxsub" href="exhibitions_current.htm">Exhibitions</a>
<ul>
<li><a href="exhibitions_current.htm">Current</a></li>
<li><a href="exhibitions_upcoming.htm">Upcoming</a></li>
<li><a class="ajxsub" href="#">Past</a>
<ul>
<li><a href="exhibitions_2013-present.htm"><span>2013-Present</span></a></li>
<li><a href="exhibitions_recent_past.htm">2010-12</a></li>
<li><a href="exhibitions_past_07-09.htm">2007-09</a></li>
<li><a href="exhibitions_recent_past2.htm">2004-06</a></li>
<li><a href="exhibitions_2001-3.htm">2001-03</a></li>
</ul>
</li>
<li><a href="longterm_loans.htm">Visiting Masterpieces</a></li>
<li><a class="ajxsub" href="#">Prado at the Meadows</a>
<ul>
<li><a href="about_Prado_Meadows.htm">Prado at the Meadows</a></li>
<li><a href="docs/Pradopartnershipexpansionrelease.pdf">Expansion of Partnership</a></li>
<li><a href="exh_Prado_Meadows_press.htm">Press Release El Greco</a></li>
<li><a href="exh_Prado_Meadows_Ribera_press.htm">Press Release - Ribera</a></li>
<li><a href="about_Velazquez_Prado_release.htm"><span>Press Release - Velaquez </span></a></li>
<li><a href="prado_press.htm">News Articles</a></li>
<li><a href="prado_fellowship.htm">Fellowships</a></li>
</ul>
</li>
</ul>
</li>
<li class="tsub"><a class="ajxsub" href="public_programs.htm">Education</a>
<ul>
<li><a href="public_programs.htm">Program Calendar</a></li>
<li><a href="internships.htm">Internships</a></li>
<li><a href="fellowships.htm">Fellowships</a></li>
<li><a href="students_teachers.htm">K-12 Resources</a></li>
<li><a href="symposia.htm">Symposia</a></li>
</ul>
</li>
<li class="tsub"><a class="ajxsub" href="membership.htm">Get Involved</a>
<ul>
<li><a href="membership.htm">Join or Renew a Membership</a></li>
<li><a href="member_travel.htm">Member Travel</a></li>
<li><a href="volunteer.htm">Volunteer</a></li>
<li><a href="internships.htm">Internships</a></li>
<li><a href="work_here.htm">Employment</a></li>
<li><a href="support.htm">Donate</a></li>
</ul>
</li>
<li class="tlast"><a href="50th_anniversary.htm">50th Anniversary</a></li>
<li class="timg"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""/></li>
</ul>
</div>
</div> <!-- End nav-->
</div> <!-- End navbackground-->
<br />
<!-- Begin wrapper-->
<div id="wrapper">
<!-- Begin slideshow-->
<div id="slideshow">
<!-- Start dwuser_XML_Flash_Slideshow_v4 -->
<!-- Do not remove the line below!!! It is required for the DWUser XML Flash Slideshow v4. -->
<script type="text/javascript" src="v4flashslideshow/slideshow.js"></script>
<div class="dwuser_xfs_v4_holder" style="width: 1100px; height: 358px;"> <strong><a href="http://www.adobe.com/go/getflashplayer/">You need to upgrade your Flash Player and enable Javascript to view this content »</a></strong> </div>
<script type="text/javascript">
// <![CDATA[
if (typeof(window['XMLFlashSlideshow_v4']) == 'undefined') { XMLFlashSlideshow_v4 = function(){}; alert('To use the XML Flash Slideshow v4, you must upload the v4flashslideshow/slideshow.js file, and have a properly defined ' + String.fromCharCode(60) + 'script' + String.fromCharCode(62) + ' reference to it in your HTML.');};
XMLFlashSlideshow_v4({width:'1100', height:'358', level:'a', xml:'v4flashslideshow/slideshow_data1.xml', backgroundColor:'#F1EFE0', backgroundAlpha:'1', preloaderColor:'#FFFFFF', preloaderTextColor:'#FFFFFF', externalSkinURL:'', touchMode:'inline', touchBackgroundColor:'#F1EFE0', backgroundImage:'images/slideshow/Calatrava3_big.jpg', rightClickLabel:'slideshow of upcoming events'});
// ]]>
</script>
<!-- End dwuser_XML_Flash_Slideshow_v4 -->
</div><!-- End slideshow-->
<!-- Begin bodyArea-->
<div id="bodyArea">
<!-- Begin programseventstitle -->
<div id="programseventstitle">
<h3>PROGRAMS & EVENTS<br />
</h3><a href="public_programs.htm"><img src="images/index/class.png" alt="programs and events" width="275" height="143" /></a>
<ul id="programsevents">
<p><a
href="public_programs.htm#symposium">International
Symposium</a><BR>Sat, Feb 7, 10 A.M.-3 P.M.</p>
<p><a
href="public_programs.htm#toast">Champagne
Toast</a><BR>Sat, Feb 7, 3:30-5:00 P.M.</p>
<p><a href="public_programs.htm#music">Music
at the Meadows</a><BR>Sat, Feb 7, 6:30 P.M</p>
<p><a
href="http://www.meadowsmuseumdallas.org/public_programs.htm#drawing">Drawing
from the Masters</a><BR>Sun, Feb 8, 1:30-3 P.M.</p>
<p><a
href="public_programs.htm#conn">Access
Program: Connections</a><br />
Wed, Feb 11, 10:30 A.M.-12:30 P.M.</p>
</ul>
</div> <!-- End programseventstitle -->
<!-- Begin newstitle -->
<div id="newstitle">
<h3>NEWS</h3> <a href="news.htm"><img src="images/index/Bacon_thumb.jpg" width="275" height="143" alt="news" title="news" /></a>
<ul id="news">
<p>12/23/14 - <a href="docs/50th_updated.pdf" target="_blank">Meadows Museum Looks Ahead to Golden Anniversary in 2015</a> (PDF)</p>
<p>12/15/14 - <a href="docs/MossChumley2014Award.pdf" target="_blank">Meadows Museum Announces 2014 Moss/Chumley Artist Award Winner: Darryl Lauster</a> (PDF)</p>
<p>11/3/14 - <a href="docs/Abello_2014.pdf" target="_blank">Meadows Museum to Present First Exhibition in U.S. of Paintings from
Juan Abelló Collection, Among World’s Top Private Collections</a> (PDF)</p>
</ul>
</div> <!-- End newstitle -->
<!-- Begin multimediatitle -->
<div id="multimediatitle">
<h3>MULTIMEDIA</h3><a href="http://vimeo.com/109750163" target="_blank"><img src="images/50th_anniversary/thumb_homepage.jpg" alt="multimedia" title="multimedia" width="275" height="143" /></a>
<ul id="multimedia">
<p><a href="media.htm">Watch videos, live webcasts, and podcasts</a>.</p>
<p><strong>50th Anniversary</strong><br />
Experience the Meadows Museum at SMU as the Museum approaches its <a href="http://vimeo.com/109750163" target="_blank">50th anniversary</a>. Find out what's going on this year, what's in the news, and discover the fascinating history of the Museum in <a href="50th_anniversary_timeline.htm">Meadows Milestones</a>.</p>
<p><a href="media.htm">June 20, 2014 <em>WFAA News</em> story about artist John Bramblitt.</a></p>
</ul>
</div> <!-- End multimediatitle -->
<!-- Begin supportustitle -->
<div id="supportustitle">
<h3>SUPPORT US!</h3>
<a href="support.htm"><img src="images/news_programs/MeadowsandLois.jpg" width="275" height="143" /></a>
<ul id="supportus">
<p><a href="membership.htm">Join/Renew your Membership</a></p>
<p><a href="support.htm">Donate to the Museum</a></p>
<p><a href="shop.htm">Browse our online shop</a></p>
<p><a href="volunteer.htm">Become a Docent</a></p>
<p><a href="shop.htm"></a><a href="volunteer.htm">Volunteer</a></p>
<p><a href="javascript:open_window(%27http://visitor.constantcontact.com/manage/optin/ea?v=001WVdpo956d6mu5VjDxJQqvxlxNOVSB0HGHh q6v_z9sTXd8YFRILmxqroHCfw5TVmt2p88AqzgSHcInE_zTaFkPw%3D%3D%27)">Join our E-newsletter</a></p>
</ul>
<!-- Start Google Translator -->
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></scrip t>
<!-- End Google Translator -->
</div> <!-- End supportustitle -->
<div class="push"></div>
</div><!-- End Body Area-->
<!--Begin footer-->
<div id="footer">
<!--Begin searchbar-->
<div id="searchbar">
<form role=“search” style="margin-right:0px; margin-top:12px; float:left; width:265px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
<input type="hidden" name="si" value="47230699">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="÷">
<input type="text" name="query" size="15" style="border:thin">
<input aria-label=”search” type="submit" value="search">
</form>
<br />
<br />
<a href="https://www.facebook.com/MeadowsMuseumDallas"><img src="images/symbols/facebook_white.png" alt="like us on Facebook" title="like us on Facebook" width="28" height="28" /></a><a href="https://twitter.com/MeadowsMuseum"><img src="images/symbols/twitter_white.png" alt="Follow us on Twitter" title="Follow us on Twitter" width="25" height="25" /></a> <a href="https://blog.smu.edu/tabularasa/"><img src="images/symbols/blog_white.png" alt="Museum blog" title="Museum blog" width="23" height="23" /></a> <a href="http://visitor.constantcontact.com/manage/optin/ea?v=001WVdpo956d6mu5VjDxJQqvxlxNOVSB0HGHh q6v_z9sTXd8YFRILmxqroHCfw5TVmt2p88AqzgSHcInE_zTaFkPw=="><img src="images/symbols/e-mail_white.png" alt="E-mail us" title="E-mail us" width="27" height="25" /></a> <a href="membership.htm"><img src="images/symbols/JOIN.png" alt="join the museum" title="join the museum" width="38" height="32" /></a> <a href="https://www.google.com/maps/preview#!q=5900+Bishop+Blvd.,+Dallas,+TX+75205&data=!1m4!1m3!1 d10476!2d-96.785088!3d32.837337!4m10!1m9!4m8!1m3!1d107264!2d-96.783199!3d32.845558!3m2!1i1 024!2i768!4f13.1"><img src="images/symbols/google-maps-iphone-icon.png" alt="Find us on Google maps" title="Find us on Google maps" width="24" height="24" /></a>
</div><!--End searchbar-->
<!--Begin admissionhours-->
<div id="admissionhours">
Hours: Tue-Sat 10:00 a.m. - 5:00 p.m.,
Thu until 9:00 p.m.,
Sun 1:00 - 5:00 p.m.
Closed Monday.
Admission: $10, adults, $8, seniors 65 & over, $4, non-SMU students. Free: Museum members, children under 12, SMU faculty/staff/students. Free Thu eve after 5:00 p.m. <br />
</div><!--End admissionhours-->
<!--Begin adresstel-->
<div id="addresstel">
Meadows Museum, 5900 Bishop Blvd., Dallas, TX 75205, <br />
P.O. Box 750357, Dallas, TX 75275-0357 <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /> 214.768.2516<br />
<a href="contacts.htm" class="white">e-mail</a> <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /><a href="site_map.htm" class="white"> Site map</a> <img src="images/index/Untitled-1.png" alt="" width="6" height="10" /> Website by <a href="http://www.mypawprint.com" class="white">My Pawprint Productions</a><br />
© 2015 Meadows Museum
</div> <!--End adresstel-->
</div> <!--End footer-->
</div> <!--End wrapper-->
</body>
</html>
and here is the layout.css file:
@charset "utf-8";
margin: 0px;
padding: 0px;
a:link {color: #656252; text-decoration: underline; }
a:active {color: #656252; text-decoration: underline; }
a:visited {color: #656252; text-decoration: underline; }
a:hover {color: #656252; text-decoration: none;
a.white:link {color: #FFFFFF; text-decoration: underline; }
a.white:active {color: #FFFFFF; text-decoration: underline; }
a.white:visited {color: #FFFFFF; text-decoration: underline; }
a.white:hover {color: #FFFFFF; text-decoration: underline; }
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1100px) {
/* Styles */
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1100px)
and (orientation : landscape) {
/* Styles */
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
.hidden
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
header {
width: 1100px;
background-repeat: no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
header a {
text-decoration: none;
background-image: url(../images/index/orange_50th_2011_1100.png);
background-repeat: no-repeat;
background-position: right top;
padding: 0;
display: block;
height: 130px;
text-indent: -700px;
header a:focus {
background-position: right top;
padding: 0;
height: 132px;
text-decoration: none;
display: block;
background-image: url(../images/index/orange_50th_2011_1100.png);
background-repeat: no-repeat;
text-indent: 0px;
text-decoration: underline;
color: white;
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
header b {
text-decoration: none;
h1 {
height: 75px;
width: 285px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: normal;
color: #f1efe0;
float: left;
padding-left: 35px;
padding-top: 75px;
h2 {
height: 51px;
width: 480px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: normal;
font-style: italic;
float: left;
color: #f1efe0;
padding-top: 99px;
h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
height: 25px;
padding-left: 10px;
h4 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 25px;
color: #666666;
#logo {
background-color: #af4d33; /*change the color to match your orange*/
display: block;
#navbackground {
background-color: #776353; /*change the color to match your brown*/
background-repeat: repeat;
#nav {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
width: 1100px;
.caption {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
margin: 25px;
p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #414040;
margin: 25px;
.caption {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
margin: 25px;
#wrapper {
background-color: #e2dfcf;
min-height: 100%;
height: auto !important;
height: 100%;
width: 1100px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
#wrapper #white {
background-repeat: repeat;
padding: 0;
display: block;
height: 10px;
background-color: #FFF;
width: 2500 px;
#wrapper #slideshow {
height: 358px;
background-repeat: no-repeat;
#wrapper #programseventstitle {
width: 275px;
height: 25px;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #414040;
font-weight: normal;
font-variant: normal;
background-color: #e2dfcf;
padding-top: 10px;
#wrapper #newstitle {
width: 275px;
height: 40px;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #414040;
vertical-align: middle;
font-weight: normal;
margin: 0px;
background-color: #f1efe0;
padding-top: 10px;
#wrapper #multimediatitle {
width: 275px;
height: 40px;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #414040;
font-weight: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #e2dfcf;
padding-top: 10px;
#wrapper #supportustitle {
width: 275px;
height: 40px;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #414040;
font-weight: normal;
margin: 0px;
background-color: #f1efe0;
padding-top: 10px;
#wrapper #bodyArea #photoprogramsevents {
float: left;
background-color: #f1efe0;
width: 275px;
height: 143px;
#wrapper #bodyArea #photonews {
float: left;
background-color: #f1efe0;
width: 275px;
height: 143px;
#wrapper #bodyArea #photomultimedia {
float: left;
background-color: #f1efe0;
width: 275px;
height: 143px;
#wrapper #bodyArea #photosupport {
float: left;
background-color: #f1efe0;
width: 275px;
height: 143px;
#wrapper #bodyArea #programsevents {
float: left;
background-color: #e2dfcf;
width: 275px;
height: 350px;
#wrapper #bodyArea #news {
float: left;
background-color: #f1efe0;
width: 275px;
height: 350px;
#wrapper #bodyArea #multimedia {
float: left;
background-color: #e2dfcf;
width: 275px;
height: 350px;
#wrapper #bodyArea #supportus {
float: left;
background-color: #f1efe0;
width: 275px;
height: 350px;
#wrapper #bodyArea #footer {
height: 100px;
width: 1100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #af4d33;
padding: 0px;
color: #FFFFFF;
background-repeat: repeat;
clear: both;
.footer, .push {
clear: both;
#wrapper #bodyArea #footer #searchbar {
height: 70px;
width: 230px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #af4d33;
padding: 15px;
color: #FFFFFF;
background-repeat: no-repeat;
float: left;
text-align: left;
clear: none;
#wrapper #bodyArea #footer #admissionhours
height: 70px;
width: 415px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #af4d33;
padding: 15px;
color: #FFFFFF;
background-repeat: no-repeat;
float: left;
text-align: left;
clear: none;
#wrapper #bodyArea #footer #addresstel{
height: 60px;
width: 330px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #af4d33;
color: #FFFFFF;
background-repeat: no-repeat;
float: right;
text-align: right;
padding-top: 22px;
padding-right: 25px;
padding-bottom: 0px;
padding-left: 15px;
#google_translate_element{
padding: 25px;
html {
overflow-y:scroll;
a img {border: none;Horgykitkat wrote:
What I found after taking out the heights from the text areas is that I was left with uneven text column lengths (alternating beige areas). So I created a repeatable jpg with the same alternating beiges and put it as the background of the bodyArea tag. Again, if there is a better way, please let me know!
A repeating background image to 'fake' equal height columns is perfectly ok.
It won't work IF your page is responsive but it isn't so no problem. If it were responsive a better solution would be to take advantage of the css property display: table; and display: table-cell;
In reference to your footer background color not showing I would assume you have floated items within the footer container. If so then you need to clear those floated items which allows the footer container to wrap itself around the floated items inside it.
You would do this by using css - overflow: hidden; - on the parent container which has the floats inside it. -
In Dreamweaver CS4, can't get sidebar background to expand to 100%
I'm using the standard Dreamweaver-CS4-generated template for a fixed-width 2-column page (i.e., left menu column and main column) with a header and footer. This is the "2 column fixed, right sidebar, header and footer."
I'd like to have an overall body background (x,y repeated - that seems easy to do) and a left menu column repeated (x,y repeated ). Alas, the comments that are generated with the template imply that you just can't do that. I've tried all sorts of height=100% conbinations, but they don't seem to work.
Any ideas?Unlike table columns, CSS columns don't communicate with each other. The height of a division is determined by how much content is inside it. And that value may be longer or shorter than adjacent columns.
TO CREATE EQUAL HEIGHT CSS COLUMNS:
Option 1. Start with an Equal Height CSS Layout
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Option 2. Faux Columns (repeating background image). The easiest method.
http://forums.adobe.com/message/2653416#2653416
Option 3. JavaScript -- may not work in all layouts.
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Can I replace my table with divs, in this context?
Hi,
I'm trying to accomplish something without the use of tables. Maybe someone can tell me how.
- The skeleton is basically made up of 3 newspaper-style columns.
- Their widths aren't very likely to change -- their widths will be fixed -- so this eliminates one problem right off the bat, right?
- The first column (left) is a sidebar menu, and it has its own distinct background image pattern.
- The other two columns (mid and right) share a flat background. Right now, I'm just calling the same 1k JPG twice (once in each of those two columns/cells). I find this simpler than creating an unnecessary container just for the common background.
- All 3 columns begin at the same line (0).
So far so good, the fixed widths and the fact that they all begin at y=0 makes this easier than it otherwise could have been.
Now here's the tricky part :
- The amount of content is different from page to page (some pages are longer than others), and the amount of content per column will also vary individually (so the sidebar might be the longest column in one file, the mid column could be the longest element in the next, and so on...)
- The layout is horizontally centered.
- All 3 columns need to end at the same spot, which will be dynamic from page to page (in other words, the backgrounds of these columns need to stretch/repeat until the end of the column with the most content, whichever of the 3 columns that may be on any given page).
- There is a page-end image to display that is as wide as the combined 3 column widths.
As you can imagine, using a table with 3 columns makes this easy as pie. But I was told to avoid tables whenever possible, so if there's an easy way to justapose 3 divs and have them behave like 3 cells of the same table -- without too much markup -- I'd give it a try, and potentially leave tables behind for good.
It would be easy enough to create a large container div, horizontally center it, and left-float 3 divs inside it... but this doesn't address the problem of having to have those backgrounds repeat all the way to the end of the site. The way I just described, the backgrounds would vertically end wherever the content of that individual column ends.
And since we know divs don't like height=100%, well...
Any help would be appreciated.
Thanks!Have you tried using Faux Columns?
http://www.alistapart.com/articles/fauxcolumns/
or Project Seven's Equal Height Columns script?
http://www.projectseven.com/tutorials/css/pvii_columns
Maybe you are looking for
-
Mail app has stopped working after 10.9.4 update on July 4, 2014
Mail is totally dead. It does not connect to the internet. Each of my email accounts has the exclamation triangle next to them. No new peripherals or devices or USB connections were added after the update. The system worked before the update, and
-
I press the power button and the chime sounds. The screen goes gray and the wheel begins to spin. This just continues. It won't finish starting up. I have tried to start up in Safe Mode with the same result. It doesn't recognize my external dvd
-
Createing flat file in cold fusion.
i got a wddx packet and i have to create a flat file out of that. i can deserialize and write into a file but how can i make it fixed length even though the length of the contents varies in the wddx packet
-
Problems adding YouTube videos to a Clearbox 2.0 Lightbox
Hi - I'm still fairly new to web design and Dreamweaver CS6. I am trying to put some YouTube videos into a Clearbox 2.0 Lightbox -- seems like a very elegant and effective way to display the videos. I have used the Clearbox 2.0 Lightbox successf
-
Applying standalone OPatch to WebCenter extensions in JDeveloper
Has anyone here succesfully applied any patches for the 11g JDeveloper WebCenter extensions using OPatch on Windows? Whenever I try this my OPatch seems succesful, I can see the patches .class or .js files (whatever files are patched) in the .jar or