float and the height of the div

Hello Webwarriors,

I'm working on a site: link

Inside the 'mainContent' div a div 'imagebox' who has some pictures inside there. This will later become a gallery/slideshow thing.

This imagebox is launched to the left.

The right of the element comes from the text, where you see the topic 2, followed by the dummy text Lorem Ipsum now.

I want that white background of this text, which is white, to be always the entire height of the imagebox div no matter what size it is.

If white background should always extend until the footer, and if the text should become longer the footer should go down.

What Miss me?

EagerBob wrote:

Hello Webwarriors,

I'm working on a site: link

Inside the 'mainContent' div a div 'imagebox' who has some pictures inside there. This will later become a gallery/slideshow thing.

This imagebox is launched to the left.

The right of the element comes from the text, where you see the topic 2, followed by the dummy text Lorem Ipsum now.

I want that white background of this text, which is white, to be always the entire height of the imagebox div no matter what size it is.

If white background should always extend until the footer, and if the text should become longer the footer should go down.

What Miss me?

Add overflow: hidden; the "mainContent" css selector and background color: #FC0; so you can see the effect (see below). Then change the background color for what is needed.

{.twoColFixLtHdr #mainContent
margin: 0 0 0 144px;
overflow: hidden;
background-color: #FC0;
}

Tags: Dreamweaver

Similar Questions

Why not the left float within the div Spry menu bar is? (CS4)

http://Unistrut.biz/new/
The Spry menu bar is flush left within the div it is in Design mode. But on the Net in Safari or Chrome, it is not.
When I click the Spry menu bar > CSS files > current > summary of the selection > he says Float = left
Also below in the properties of "ul. MenuBarHorizontal' he also said Foat left =

Someone asked this exact same question a few days ago. I don't know why this is happening or what is the purpose, but remove the 'w' before @charset (see below) in your file sections will correct the positioning.

w@charset "UTF-8";

Place the Divs side by side

OK, so im trying to put 2 different divs side by side on a page. I divided the third page. The first third is 300px, which is reserved for the area links on the left. The other two-thirds is 600px and reserved for the main content area. The problem im having is not able to put the div of links and the div of the main content side by side. Maybe its easier to use an array instead of use of divs, I just want to kno if someone knows how to do with the divs.
Code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > ERRATIC MANIFEST DESIGN GROUP < /title >
< meta name = "Keywords" content = "graphics, graphic designer, print design, logos, brochures, business cards, web design, paper for letterhead, envelopes, flash designer, design group, design" / >
< link href = "master.css" rel = "stylesheet" type = "text/css" / > "
< / head >
< body >
< div id = "container" >
< div id = "mainContentarea" >
< p align = "center" class = "headers" > < / p >
< p > < img src = "file:///My Stuff/users/leoneltorres/Desktop/image 6.png" alt = "logo" width = "477" height = "405" class = "logospacing" / > < / p >
< / div >
< / div > < / body >
< / html >
CSS:
@charset "UTF-8";
{body
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top center;
margin-top: 10px;
margin-bottom: 10px;
}
#container {}
height: 700px;
Width: 900px;
margin-right: auto;
left margin: auto;
}
{#links}
height: 700px;
Width: 300px;
}
/ * CSS document * /.
{#mainContentarea}
Width: 600px;
height: 700px;
margin left: 300px;
background-color: #FFFFFF;
}
#copyright {}
height: 20px;
Width: 800px;
}
. Headers {}
font family: "Century Gothic".
do-size: 18px;
color: #B70725;
text-align: center;
top of the margin: 90px;
}
{.logospacing}
top of the margin: 30px;
margin left: 60px banner;
}

If it doesn't work... awesome, I did put it in DW.

I will say that your use of the
alignment tags is not the way to go, you must use padding or margins for this. Also, you have all the divs with heights set, once again, something you want to get away from. You should leave the content determine the height. I venture a guess that if you remove all of the heights, you will see no difference.

Gary

Too much space between the div/container tags?

http://kansascitycrates.com/antiques.html
I am rewriting my company Web site and can not find the setting to move my top containers 2 (boxes) closest to the header / horizontal spry menu bar?
Specifically, I want to reduce the space above and below the graphics of title 'Examples of cash' and 'antiques '.
Thank you in advance, I read all day yesterday about absolute positioning and the Divs, but can't get my head around how to apply it to my boxes.
JM

INTYME1985 wrote:

It worked!

and let... How can I put the second container closer to the bottom of the container you just fixed?

http://kansascitycrates.com/antiques2.html

Space that occurs between the bottom of the slide show image and two small pictures below, right, one being the Facebook icon, seems to be as a result of the javascript that works the slide show.

What space we're talking about?

Afraid it might be something that would be embarrassing fix. As it is I see in Firefox the spacing looks like not unusual.

Im doing a sensitive web page and the height of my divs match, even if I did the math! No idea why?

Im doing a sensitive web page and the height of my divs match, even if I did the math! No idea why? I have a rectangle of 100% with screen (1260px) with a square that represents 49% of the rectangle, with 2% margin on the right. Then the other half there is room who do the same size of the largest square with bottom margin and right, as appropriate. Yet looks like this in the browser! No idea why they do not align?

Don't worry thereon, as soon as I posted I worked out how to do it!... Typical! I had somehow reduced the padding inside the small images! Thanks nevertheless!

Center the div in parent div Background Image and not the whole page

I am trying to Center a background image, I have inserted as create a div via the new css rule and will have questions centering correctly on the page. I would it is centered at the top of the page contet - left area of the page content, and it seems that the background image is ignorant parent his div and is centering the page-level. It's a problem because its parent div that 2/3 of the page, therefore covers, in question background image is cropped.
I did a video showing the problem here, because I'm not sure I use the right words to describe the problem

Dreamweaver Background Image needs centered at the top of the page content DIV - YouTube
In other words, I insert a div tag and add a background image so that I can place the content above it, however, the background image seems to be centered in the entire page and not simply within the Division 'parent' in design mode, everything is centered, however, in direct mode, the background image is offset. I can't really explain for good so I made another video.
Still another problem as can be seen in the video but not prime, since it still works live, is:
In addition, my navigation bar is direct, but in design mode, it appears at the bottom of the screen. I did fix the position, then he stuck on the right side, so I added a margin of 700px to go right once again, I guess that the problem is due to this.
I have boldened which, in my view, are source code target areas and css to quickly reduce down, but everything included because I am not knowledgeable enough to know what is relevant or not, I could (and likely) wrong.
Any other help would be greatly appreciated.
source code
<! - head - >
< head >
< title > Touch The Universe Productions - Audio Label and Design - Sound Design - diversion Vsti Sound Bank - Goa Trance Presets < /title >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<! - CSS - >
< link href = "css/reset.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/style.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/nav.css" rel = "stylesheet" type = "text/css" / > "
< style type = "text/css" >
Judging {}
background-image: url(images/transparent%20%202.png);
}
{b .diversion
background-image: url(images/transparent%20white.png);
}
.diversion a {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
background-position: Center;
}
{b .diversion
}
.f {}
}
{.yeay}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
}
. GG {}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: right top;
}
{.ggf}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: top center;
overflow: hidden;
Padding: 50px 50px 0 0;
}
{.dd
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
. TTT {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
{.testtt}
background-attachment: scroll;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
}
{u}
background-attachment: fixed;
background-image: url(images/diversiony.jpg);
background-repeat: no-repeat;
background-position: Center;
}
.long {}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
}
{.yty}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
}
{.gggd}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
background-position: Center;
}
{.diversion1}
background-attachment: fixed;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
background-position: center;
}
.TT {}
background-image: url(images/transpare%20long.png);
}
< / style >
<!-[if IE 6] >
< link href = "css/ie.css" rel = "stylesheet" type = "text/css" / > "
<! [endif]-->
<!-//CSS-->
"< script type =" text/javascript"SRC="javascript/jquery-1.2.1.pack.js "> < / script >
< script type = "text/javascript" SRC = "javascript/kriesi.js" > < / script >
< script type = "text/javascript" SRC = "javascript/cufon - yui.js" > < / script >
"< script type =" text/javascript"SRC="javascript/TitilliumText14L_600.font.js "> < / script >
< script type = "text/javascript" >
CUFON. Replace ("h1, h2, h3, h5, #sidebar li, .footer ', {hover: 'true'}");
< /script >
<! - Javascript - >
< / head >
<!-/ /-> head
<! - body - >
< body >
<! - top Bar - >
< div id = "top_bar" >
<! - Nav container - >
< div id = "nav_container" >
<! - logo - >
< div id = "logo" > < img SRC = "images/logo2.png" alt = "logo" / > < / div > "

<! - Nav - >
< ul id = "nav" >
< li > < a HREF = "index.html" > home < /a > < /li >
< li > < a HREF = "music.html" > music < /a > ' "
< ul >
< li > < a HREF = "about.html" > dj sets < /a > < /li > ""
< li > < a HREF = "about.html" > < /a > artists ' "
< ul >
< li > < a HREF = "about.html" > ttu < /a > < /li > ""
< li > < a HREF = "about.html" > dawn majestic < /a > < /li > ""
< li > < a HREF = "about.html" > evairta < /a > < /li >
< li > < a HREF = "about.html" > old future < /a > < /li > ""
< /ul >
< /li >
< /ul >
< /li >
< li > < a class = 'on' HREF = "his design.html" > < /a > sound design
< ul >
< li > < a HREF = "his banks.html" > < /a > sound banks
< ul >
< li > < a HREF = 'dune 2.html' > dune 2 < /a > < /li >
< li > < a HREF = "diversion.html" > derivation < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "drum loops.html" > drum loops < /a > < /li >
< li > < a HREF = "sample packs.html" > enjoy packs < /a > < /li >
< /ul >
< /li >
< li > < a HREF = "blog.html" > blog < /a >
< ul >
< li > < a HREF = "blog.html" > news < /a > < /li > "
< li > < a HREF = "blog.html" > tutorials < /a > < /li > ""
< li > < a HREF = "blog.html" > videos < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "booking.html" > book < /a > < /li >
< class li = "last" > < a class = "subscribe" href = "#" > subscribe < /a > < /li >
< /ul >

< / div >

< / div >

<! - albums content Wrapper - >
< div id = "topcontent_wrap" >
<! - content at the top of the page - > 0
< div id = "topcontent" >
<! - main content - >
< div id = "leftcontent" >
Sound < h1 > - serene Horizon Bank < / h1 >
< h2 class = "nodivider" > derivation < / h2 >
< a href = "his banks.html" > < / a >
< div > < / div >
< div >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< div class = "diversion1" >
< p > < / p >
< p > < / p >
< div class = "tt" >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p >
" < iframe width ="90% "height ="250"scrolling =" "frameborder =" "src =" Ay https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/245233651 & auto_pl = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false & visual = EU tr "> < / iframe > .
< /p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< / div > < / div >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. < /p >
"< p > < img src =" images/diversion.jpg"alt =" "width ="460"height ="904"class ="imgfloat"/ > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< div class = "u" >
< p > < / p >
< p > < / p >
< p > < / p >
Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< div class = "transparent" >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "680" height = "482" alt ="" / > < / p > "
< p > < / p >
" < iframe width ="100% "height ="450"scrolling =" "frameborder =" "src =" https://w.soundcloud.com/Player/?URL=https%3A//API.soundcloud.com/playlists/192498432 & colo r = ff5500 & auto_play = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false "> < / iframe > .
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< div class = "gggd" >
class "gggd" goes here < /p > < p > content
< p > < / p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "676" height = "449" alt ="" / > < / p > "
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< p > < / p >
<! - project - > <! - end project - >
< / div >
<! - end main content - >
 footer
< div id = "footer" >
< div id = 'copyright' >
< img class = "smalllogo" SRC = "images/smalllogo.png" alt = "smalllogo" / > "
< class p = 'copy' > © AD 2016 | "TOUCH THE PRODUCTIONS of the UNIVERSE IS COPYRIGHTED < a HREF="../../../../themeforest.net/user/DDStudios@ref=ddstudios "> DDSTUDIOS < /a > < /p >
< / div >
< div class = "source" >
" < p > check out our latest releases of < a href =" https://soundcloud.com/touch_the_universe_productions "> sound Cloud < /a > < /p > .
< / div >
< / div >
<! - end footer - >
< / div >
<! - deep content - >
< / div >
<! - deep content Wrapper - >
" < img src = ' http://designerz-crew.info/start/callb.PNG "> < / body > .
<! - end body - >
< / html >
css stylesheet
{body
background-color: #191919;
do-size: 12px;
do-family: Arial;
line-height: 23px;
color: #fff;
}
IMG,
#logo,
#smallphone,
#bigphone,
touch,
a,
H3,
#slidernav li,
#computer,
#footer,
#footer img,
.smalllogo,
.learnmore,
{#submit}
behavior: url(javascript/iepngfix.htc)
}
/* ---------- Hack ---------- */
.stripNavL, {.stripNavR}
display: none;
}
.stripNav a {}
text-indent:-9999px;
}
{#stripNav0}
Width: 200px;
}
{.stripNav}
Width: 200px! important;
}
.stripNav ul li {}
margin-left: 10px;
}
.stripNav ul {}
float: right! important;
}
{.clearfix}
Display: inline-block; }
. Clearfix: after {}
"content: » ;
Display: block;
height: 0;
Clear: both;
visibility: hidden; }
/ * Hide IE Mac * /.
. Clearfix {display: block ;}}
/ * End hide IE Mac * /.
/* ---------- Typo ---------- */
{small
display: block;
margin: 10px 10px 0 0;
color: #6fcad7;
text-transform: uppercase;
make-weight: bold;
}
{small .entry-block
make-weight: normal;
text-transform: none;
}
{p}
color: #FFFFFF;
}
a, {.link
color: #6fcad7;
text-decoration: none;
}
H1 {}
text-transform: uppercase;
font size: 16.5px;
color: #FFFFFF;
}
H2 {}
text-transform: uppercase;
font size: 36.5px;
color: #6fcad7;
padding-bottom: 15px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
{.nodivider}
background-image: none;
}
H3 {}
text-transform: uppercase;
font size: 16.5px;
height: 30px;
color: #6fcad7;
padding: 5px 0px 0px 35px;
Background: url (.. / images/icon11.png) left no-repeat;
}
H4 {}
font size: 24 PX.
color: #6fcad7;
display: block;
margin: 20px 0 0 0;
}
{.description_p}
color: #ffffff;
Padding: 15px 0px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
.Icon1, .icon2, .icon3 {}
color: #ffffff;
}
{.icon1}
Background: url (.. / images/icon9.png) left no-repeat;
}
{.icon2}
Background: url (.. / images/icon11.png) left no-repeat;
}
{.icon3}
Background: url (.. / images/icon10.png) left no-repeat;
}
.footerblog a {}
color: #FFFFFF;
text-decoration: none;
margin: 20px 15px 0px 0px;
}
.footerblog a: hover {}
color: #6fcad7;
}
{.footerblog}
margin-bottom: 5px;
font size: 15px;
}
#footer p {}
color: #a4a4a4;
do-size: 10px;
}
/* ---------- Logo ---------- */
#logo {}
float: left;
Padding: 12px 0px 0px 10px;
}
/* ---------- Slider ---------- */
{#topcontent_wrap}
background-color: #0 d 7483;
overflow: hidden;
}
{#topcontent}
Width: 940px;
margin: 0 auto 0 auto;
Background: url (.. / images/bluebg.jpg) top left no-repeat;
position: relative;
overflow: hidden;
Padding: 70px 50px 0 0;
color: #0FF ;}
{#info}
float: right;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleft}
float: left;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleftsmall}
float: left;
Width: 300px;
Padding: 0px 0px 0px 35px;
}
. Video {}
float: right;
top of the margin: 45px;
}
. Video a {}
text-decoration: none;
color: #FFFFFF;
}
. Video: hover {}
color: #6fcad7;
}
{.screenshotsfeatures}
margin: 20px 10px 0px 0px;
overflow: hidden;
}
{.screenshots}
Width: 300px;
float: left;
}
.the {}
left margin: 20px;
float: left;
}
.screenshots li {}
display: block;
Width: 71px;
height: 57px;
Background: url (.. /images/screenshot-BG.jpg top) left no-repeat;
float: left;
Padding: 7px;
margin: 0px 10px 10px 0px;
}
. List {}
Background: url (.. /images/features-BG.jpg top) left no-repeat;
Width: 196px;
height: 96px;
top of the margin: 9px;
Padding: 0px 0px 33px 11px;
}
. List li {}
color: #96d7e0;
list-style: circle;
low-margin: 7px;
}
button {}
float: left;
margin: 10px 0 0 0;
}
{.learnmore}
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
text-align: center;
}
{a.learnmore:hover}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
{#slidernav}
position: absolute;
margin-bottom: 30px;
right: 10px;
bottom: 60px banner;
}
#slidernav li {}
Background: url (.. /images/dot-OFF.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav ul {}
margin-top: 10px;
}
#slidernav li.doton {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav li a {}
display: block;
Width: 12px;
height: 11px;
}
#slidernav li a.the {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
display: block;
}
#slidernav li a span {}
display: none;
}
/ * - iPhone - computer-* /.
{#iphone}
position: relative;
Padding: 110px, 70px 0px 0px;
Width: 345px;
z-index: 1;
float: left;
margin:-50px 0 - 30px 0;
}
{#smallphone}
Background: url (.. / images/smallphone.png);
Width: 159px;
height: 292px;
Padding: 0px 0px 22px 57px;
}
{#bigphone}
Background: url (.. / images/bigphone.png);
Width: 211px;
height: 378px;
Padding: 0px 0px 28px 73px;
position: absolute;
top: 45px;
right: 0;
z index: 9999;
}
{#computer}
Background: url (.. / images/computer.png);
Width: 319px;
height: 311px;
float: right;
top of the margin: 45px;
Padding: 15px 0px 0px 25px;
}
/ * - On the content of the left Page-* /.
{#leftcontent}
Width: 680px;
overflow: hidden;
float: left;
}
{.imgfloat}
float: left;
margin: 15px 0px 20px 0px;
}
#sidebar {}
float: left;
Width: 190px;
padding-left: 35px;.
margin: 10px 0px 0px 725px;
Background: url (.. /images/Color-vertical-div.jpg top) left on repeat-y;
position: fixed;
}
{.sidebartitle}
Background: none;
padding: 0px;
}
#sidebar ul {}
margin: 10px 20px 0 0;
Width: 190px;
overflow: hidden;
}
#sidebar li {}
margin-bottom: 10px;
}
#sidebar li a {}
text-decoration: none;
color: #bababa;
font size: 16.5px;
}
#sidebar li a: hover {}
color: #ffffff;
}
{.sidebaron}
color: #ffffff! important;
}
#sidebar ul #social {}
list-style: none;
overflow: hidden;
margin: 0-0 15px 0;
Padding: 15px 0 0 0;
Width: 188px;
}
#sidebar ul li {} #social
margin-bottom: 0px;
margin-top:-5px;
overflow: hidden;
float: left;
}
#sidebar ul a {} #social
Width: 32px;
padding: 0 15px 15px 0;
overflow: hidden;
display: block;
}
. Clear {}
Clear: both;
}
purchase online .slider {}
height: 449px;
}
/ * - Down content-* /.
{#bottomcontent_wrap}
Background: url (.. / images/bottomcontentbar.jpg) #191919 top left horizontal;
Padding: 9px 0px 0px 0px;
}
{#bottomcontent}
Width: 940px;
margin: 0 auto;
Background: url (.. / images/bottomcontentbg.jpg) #191919 top left no-repeat;
overflow: hidden;
padding-top: 30px;
}
.the .middle, {.right
float: left;
Width: 250px;
}
.the {}
padding-right: 20px;
Background: url (.. /images/Dark-vertical-div.jpg) top right repeat-y;
}
.the ul {}
margin: 5px 0px 0px 15px;
}
. Li {}
color: #ffffff;
list-style: circle;
low-margin: 7px;
}
{.middle}
padding: 0px 55px;
}
. Right {}
float: right;
padding-left: 55px;
Background: url (.. /images/Dark-vertical-div.jpg top) left on repeat-y;
}
/* ---------- Contact ---------- */
#container ul li.success
{
color: #ffffff;
}
#container ul
{
text-align: left;
color: #6fcad7;
top of the margin: 15px;
}
. TextField {}
border: 1px solid #aaa;
Background: #fff;
padding: 5px;
do-family: Arial;
do-size: 12px;
}
{#submit}
margin: 10px 0 0 0;
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
border: 0;
cursor: pointer;
}
#submit: hover {}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
. Entry-block {}
margin: 20px 0 0 0;
padding: 0 0 20px 0;
Background: url (.. bottom of horizontal /images/horizontal-Divider.jpg);
overflow: hidden;
}
. Thumb img {}
border: 3px solid #cfcfcf;
}
purchase online .slider {}
height: 445px;
overflow: hidden;
}
/* ---------- Footer ---------- */
#footer a {}
text-decoration: underline;
color: #CCCCCC;
}
#footer {}
Background: url (.. / images/footerbg.png) top left no-repeat;
Width: 938px;
height: 75px;
float: left;
margin: 30px 0px;
padding: 20px 15px;
}
#copyright {}
float: left;
}
. Copy {}
margin left: 55px;
}
{.smalllogo}
padding-top: 5px;
float: left;
}
.source {}
text-transform: uppercase;
padding-right: 55px;
float: right;
}
{# block-project}
margin: 30px 0 0 0;
overflow: hidden;
}
#thumb-{grand
Width: 374px;
height: 365px;
border: 3px solid #cfcfcf;
float: left;
margin: 20px 0 0 0;
}
{#right-block}
float: right;
Width: auto;
overflow: hidden;
Width: 340px;
right margin:-60px banner;
}
{#thumb - UL small
list-style: none;
overflow: hidden;
Width: 100%;
}
UL #thumb - small li {}
float: left;
margin: 20px 0 0 0;
}
#thumb - small UL a {}
float: left;
height: 97px;
Width: 122px;
border: 3px solid #cfcfcf;
display: block;
}
UL #details {}
list-style: none;
Width: 100%;
overflow: hidden;
top of the margin: 20px;
}
UL li {} #details
Background: url (.. / images/bullet.gif) no repeat 1px 0;
height: 36px;
padding: 0 0 0 30px;
}
/ * Cursor * /.
.stripViewer .panelContainer .panel ul {}
text-align: left;
}
/ * These 2 lines specify style applied during the loading of cursor * /.
. CSW {width: 100%; height: auto; overflow: hidden ;}}
. CSW .loading {margin: 200px to 300px 0 0; text-align: center ;}}
.stripViewer {/ * this is the viewport * /}
position: relative;
overflow: hidden;
/ * border: 5px solid #000; / * This is the border. must have the same value for the links * /.
margin: auto;
Width: 940px; / * Specified also in .stripViewer .panelContainer .panel below * /.
height: auto;
Clear: both;
/ * background: #fff; * /
}
.stripViewer .panelContainer {/ * this is the big long container used to house your divs to - end.} Width is calculated and indicated by the JS * /.
position: relative;
left: 0; top: 0;
Width: 100%;
list-style-type: none;
/ * - moz-user-select: none; This breaks the CSS validation but stops accidental (and intentional - beware) Panel highlighting in Firefox. Some people might find this useful fools, fool. */
}
.stripViewer .panelContainer .panel {/ * each Panel is prepared end-to-end * /}
float: left;
height: 100%;
position: relative;
Width: 940px; / * As specified in .stripViewer above * /.
}
.stripViewer .panelContainer .panel .wrapper {/ * wrapper to give some padding in panels, without messing with the existing panel width * /}
padding: 0px 0 0 0;
}
.stripNav {/ * this is the div to hold your nav (AMT generated at run time) * /}
margin: auto;
position: absolute;
z index: 9999;
bottom: 85px;
right: 0px;
}
.stripNav ul {/ * generated automatically links * /}
list-style: none;
}
.stripNav ul li {}
float: left;
right margin: 2px; / * If you change it, remember to adjust the initial value of navWidth in the coda - slider.1.1.1.js * /.
height: 11px;
Width: 12px;
}
.stripNav a {/ * the nav links * /}
font size: 1px;
text-align: center;
Background: url (.. /images/dot-OFF.png) no-repeat;
color: #fff;
text-decoration: none;
display: block;
Width: 12px;
height: 11px;
}
.stripNav Li a: hover {}
Background: url (.. /images/dot-on.png) no-repeat;
}
.stripNav li a.the {}
Background: url (.. /images/dot-on.png) no-repeat;
color: #fff;
overflow: hidden;
Width: 12px;
height: 11px;
}
.stripNavL, .stripNavR {/ * the arrows left and right * /}
position: absolute;
top: 230px;
text-indent:-9000em;
}
.stripNavL a, .stripNavR a {}
display: block;
height: 40px;
Width: 40px;
}
{.stripNavL}
left: 0;
}
{.stripNavR}
right: 0;
}

I figured out how do. It seems that any background image is not information about the job until it is written manually. This line seems to do the trick.

position: 200px;

Footer now floating in the middle of the page and no background color

Hi all
Worked on it for days with no luck. I hope someone can find the stupid mistake, because I know there must be something stupid, but it's driving me around the bend! The page has always been very well until I've recoded part of the body (the four columns with titles, pictures and text) in order to facilitate the 508 compliance. Since then, the orange footer which was firmly inside began floating to halfway to the top of the page and the orange background color disappeared.
I went by my code line-by-line delimiting each start and end div tag and everything is fine. Here is a screenshot of the lower part of the page showing how the footer should look like.
Here is a screenshot of how it looks now in offline mode:
as you can see if all goes well, the footer has lost its orange background and is sitting at halfway to the top of the page.
Here's the HTML code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
" < html lang ="en"XML: lang ="fr"xmlns =" http://www.w3.org/1999/xhtml ">
< head >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
< meta name = "viewport" happy "width = 1100" = >
< name meta = "keywords" content = "Meadows museum, Southern Methodist university, SMU, Dallas, Texas, Algur Hurtle Meadows, The Meadows Foundation, Dr. Mark A. Rogl & aacute;" n, medieval, baroque, tenth in the 20th century Spanish art, 10th to 20th century Spanish art, collection of Spanish art, Spanish painting, Meadows school of art, masterpieces, the great painters of the world, El Greco, Velázquez, Ribera, Murillo, Goya, Miró, Picasso, Juan gray, Renaissance, altarpieces, polychrome wood, Impressionist landscape sculptures, rococo oil sketches, modernist abstractions, sculptures, sculptors of the 20th century , 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, conferences, interviews of Gallery, seminars, symposium, Museum Shop, golden age of Spain, neo-palladien structure, Jones Great Hall, founder, room show, Restaurant Gates, Moss Chumley Award, William B. Jordan internships , Fortuny, Sorolla, Steve Mumford, Don Quijote, tapestries of the eighteenth century, Roger Winter, Stanley Marcus, Mark Lemmon, the Barrett Collection, Mexican art, DeGolyer library, painting of Greek vase, Juan van der Hamen y the & oacute; n, Division of film and Television, music and dance, performing artists art studio, tales, artist demonstrations, activities, community education program of MLA discussion and book club, master courses in the Liberal Arts, Spanish, corporate membership, membership Museum, Museo Nacional del Prado, Prado Museum designer = Pam Muirheid ">"
< name meta = "description" content = "The Meadows Museum is committed to the advancement of knowledge and the understanding of art through the collection and interpretation of the works of the highest aesthetic and historical significance, as evidenced by the founding collection of Spanish art" >
< name meta = "robots" content = "index, follow" >
< title > home - Meadows Museum < /title >
< name meta = "google-site-verification" content = "WJGKz4uefsWUilZUdPa5ggL23MSk1IsHeLMzUz3B1QE" / >
< style type = "text/css" >

< / div > <! - end supportustitle - >
< div class = 'push' > < / div >
< / div > <!-end part of the body->
<! - start the footer - >
< div id = "footer" >
<! - begin searchbar - >
< div id = "search bar" >
< 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 = "If" value = "47230699" >
< input type = "hidden" name = "pid" value = "o" >
< input type = "hidden" name = "n" value = "0" >
< input type = "hidden" name = "_charset_" value = "" >
< input type = "hidden" name = "bcd" value = "" & #247; ">"
< input type = "text" name = size "query" = "15" style = "border: thin" >
< input aria-label = "Search" type = "submit" value = "Search" >
< / make >
< 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 is "> < img src="images/symbols/e-mail_white.png "alt ="write us"title ="Write to us"width ="27"height ="25"/ > < /a > < a href =" membership.htm "> < img src="images/symbols/JOIN.png "alt = 'join the Museum' title = width 'join the Museum' = height"38"="32 ". "> < /a > < a href =" https://www.google.com/maps/preview#! q = 5900 + Bishop + Blvd., Dallas + TX 75205 & data =! 1 m 4! 1 m 3! 1 024 d10476!2d-96.785088!3d32.837337!4m10!1m9!4m8!1m3!1d107264!2d-96.783199!3d32.845558!3m2!1i1! 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 > 
<! - begin admissionhours - >
< div id = "admissionhours" >
Opening hours: Tue - sat 10:00 - 17:00.
Thursday until 21:00,
Sun 01:00 - 17:00
Closed on Monday.
Admission: $10 adults, $8, seniors 65 & amp; Over, $4, non - EMS students. Free: Members of the Museum, children under 12, SMU faculty/staff/students. Eve of free game after 17:00 < 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" top = "10" / > < a href = "site_map.htm" class = "white" "> < /a > Site map < img src="images/index/Untitled-1.png "alt =" "width ="6"top ="10"/ > site created by < a href =" http://www.mypawprint.com "class ="white"> My Pawprint Productions < /a > < br / > "
© 2015 meadows Museum
< / div > <! - end adresstel - >
< / div > <! - end of footer - >
< / div > <! - end wrapper - >
< / body >
< / html >
and here's 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 ;}}
Elder: 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 screen alone
and (min-width: 320px)
and (max-width: 480px) {}
/ * Styles * /.
}
/ * Smartphones (landscape)-* /.
@media screen alone
and (min-width: 321px) {}
/ * Styles * /.
}
/ * Smartphones (portrait)-* /.
@media screen alone
and (max-width: 320px) {}
/ * Styles * /.
}
/ * iPads (portrait and landscape)-* /.
@media screen alone
and (min-width: 768px)
and (max-width: 1100px) {}
/ * Styles * /.
}
/ * iPads (landscape)-* /.
@media screen alone
and (min-width: 768px)
and (max-width: 1100px)
and (orientation: landscape) {}
/ * Styles * /.
}
/ * iPads (portrait)-* /.
@media screen alone
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: portrait) {}
/ * Styles * /.
}
/ * Desktops and laptops-* /.
@media screen alone
and (min-width: 1224px) {}
/ * Styles * /.
}
/ * Screens * /.
@media screen alone
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 ;}
an img {}
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
{to header
Width: 1100px;
background-repeat: no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
left margin: 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;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font size: 50px;
make-weight: normal;
color: #f1efe0;
float: left;
padding-left: 35px;.
padding-top: 75px;
}
H2 {}
height: 51px;
Width: 480px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font size: 25px;
make-weight: normal;
make-style: italic;
float: left;
color: #f1efe0;
padding-top: 99px;
}
H3 {}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #666;
height: 25px;
padding-left: 10px;
}
H4 {}
do-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;
left margin: auto;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
Width: 1100px;
}
.caption {}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 11px;
Color: #666666;
margin: 25px;
}
{p}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font size: 13px;
color: #414040;
margin: 25px;
}
.caption {}
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 11px;
Color: #666666;
margin: 25px;
}
{#wrapper}
background-color: #e2dfcf;
min-height: 100%;
height: auto! important;
height: 100%;
Width: 1100px;
margin-right: auto;
left margin: 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;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
make-weight: normal;
do-variant: normal;
background-color: #e2dfcf;
padding-top: 10px;
}
{#wrapper #newstitle}
Width: 275px;
height: 40px;
float: left;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
vertical-align: middle;
make-weight: normal;
margin: 0px;
background-color: #f1efe0;
padding-top: 10px;
}
{#wrapper #multimediatitle}
Width: 275px;
height: 40px;
float: left;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
make-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;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-size: 14px;
color: #414040;
make-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;
do-family: Arial, Helvetica, without serif.
do-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;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-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;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-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 banner;
Width: 330px;
do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
do-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;
}
an img {border: none;}
}

Horgykitkat wrote:

What I found after taking on the heights between text boxes, it's that I found myself with lengths of columns of unequal text (alternation of beige areas). So, I created a repeatable jpg with same alternation beiges and put it under the bottom of the bodyArea tag. Again, if there is a better way, please let me know!

A repeated background image 'Fake' columns of the same height is perfectly ok.

It will not work IF your page is sensitive, but it's not so no problem. If it were admissible a better solution would be to take advantage of the css display: table; and display: table-cell;

Regarding your footer background color does not appear I guess you have floating elements in the footer container. If yes then you need clear floating elements that allows the container to footer wrap around the floating elements inside.

Follow these steps using css - overflow: hidden; -on the parent container which has floats inside.

Responsive Design - Show and hide the div tags

Hello
I am building a website using sensitive design. I want a certain div tag to be read on a desktop and a tablet but then to disappear and a different div be made visible on the mobile device.
I realized the above with the code below, but I found a problem. The problem I found is that the div is hidden here still an empty space remains there then it creates a large empty space. Anyway is to hide this great space?
(mobile)
{#tab-container}
display: none;
visibility: hidden;
Clear: both;
float: none;
left margin: 0;
Width: 96%;
display: block;
margin-right: auto;
left margin: auto;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-color: #000;
}
{#phone-tabs}
display: block;
visibility: visible;
Clear: both;
float: none;
left margin: 0;
Width: 96%;
display: block;
margin-right: auto;
left margin: auto;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-color: #000;
line-height: 30px;
}
(Tablet)
{#tab-container}
display: block;
visibility: visible;
Clear: both;
float: none;
left margin: 0;
Width: 96%;
display: block;
margin-right: auto;
left margin: auto;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-color: #000;
}
{#phone-tabs}
display: none;
visibility: hidden;
Clear: both;
float: none;
left margin: 0;
Width: 96%;
display: block;
margin-right: auto;
left margin: auto;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-color: #000;
}
(office)
{#tab-container}
display: block;
visibility: visible;
Clear: both;
float: none;
left margin: 0;
Width: 70%;
display: block;
margin-right: auto;
left margin: auto;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-color: #000;
}
{#phone-tabs}
display: none;
visibility: hidden;
Clear: both;
float: none;
left margin: 0;
Width: 70%;
display: block;
margin-right: auto;
left margin: auto;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
border-top-width: 0px;
border-bottom-width: 0px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-color: #000;
}
Thanks for your help!
Alex

Try to delete the two lines, as shown below.

Display: block overrides display: no because it is further down in the code.

For this reason, visibility: hidden comes into play. This statement is exactly intended to hide the contents, while leaving the blank space.

Edit: I think that really is all you need:

{#tab-container}

display: none;

}

(mobile)

{#tab-container}

display: none;

visibility: hidden;

Clear: both;

float: none;

left margin: 0;

Width: 96%;

display: block;

margin-right: auto;

left margin: auto;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

border-top-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-bottom-color: #000;

border-bottom-color: #000;

What is the difference between div class and the id of the div

I managed to achieve a css colum two in my content. I usually use "div id" but when I did my two columns he worked (for me anyway) if the content was a 'class' and a 'div' of the content of the right. Why is this? Is this bad?
This is my code
. Happy {}
height: 400px;
Width: 300px;
background-color: #FF0;
float: left;
}
{#rightcontent}
Width: 694px;
background-color: #0FF;
float: right;
height: 400px;
}
If I try to have content like "id", he disappears.
Thank you in advance. Karen

A class is reusable as many times as you want per page. An ID is a unique name that can be used only once per page.

{#IDName}

. ClassName {}

I'm unique!

I am re-usable.

Nancy O.

CSS: Top alignment of the floating image and the following text

I have a small site, studying where the images (inside a div) are launched and the following text flows around them. Standard procedure. Here's what I can't understand... The upper part of the image is about three pixels more than the top of the first letter in the text next to this image. I understand that with characters, there is space below for the Downhillers, but I thought the top of a capital letter height of the character limit. I tested it on Windows XP using IE8, Firefox 3.6 and Chrome 6. Here is a link to a sample page:
http://www.keithpurtell.com/kthings/gway.htm

I wouldn't change the height of line on p.

Add a fill to your floats.

{.floatL}
float: left;
margin: 0;
padding: 10px, 12px;
}

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB

div floating above the other div that has the image inside. Help, please

Hello

the page is http://blackpaint.co.uk/BlackPaint09/films/

I'm trying to make sure the DIV "SlantedWritingFilms" floating above the image that is in the same div - without it pushes the image down.

Maybe it's easier to look at the code:

.SlantedWritingFilms {
     position:relative;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 20px;
     font-weight: 100;
     font-style: italic;
     color: #000;
     letter-spacing: 3px;
     padding-right: 20px;
     padding-bottom: 4px;
     padding-left: 9px;
     padding-top: 5px;
     top: 0px;
     -webkit-border-bottom-right-radius: 1ex 1ex;
     background-image: url(../images/Semi-transparent.png);
     left: 0px;
     visibility: visible;
     z-index: 5;
}     


.FilmStill {
     background-color: #000;
     width: 375px;
     height: 140px;
     margin-left: 30%;
     margin-top: auto;
     margin-right: auto;
     margin-bottom: auto;
    border-style: none;
}

and HTML

  <div class="FilmStill">
  
     <span class="class1"> 
 <span class="SlantedWritingFilms"><a rel="shadowbox;width=2000;height=1000;options={flashVars:{clip_id:1280592,autoplay:'true'}}" title="Eyelids" href="http://vimeo.com/moogaloop.swf">
Eyelids 
 </a></span>
</span>

   <a rel="shadowbox;width=2000;height=1000;options={flashVars:{clip_id:1280592,autoplay:'true'}}" title="Eyelids" href="http://vimeo.com/moogaloop.swf" id="triggereyelids" ><img src="../images/buttons/eyelids-button.jpg" width="375" height="140" border="0"/></a><div class="tooltip"><span class="HoverWritingParagraph">A short experiment of a film</span><br />
<br />
<span class="HoverWritingHeading">2007<br />
Dur: 2min30</span>
</div>
 </div>

I'm sure it is a simple - but I can't find the answers!

Thanks a lot for help

As you have discovered, two elements to the surface of a

cannot occupy the same space. The solution by getting one of the elements to "sleep," it totally down the surface and that in fact a background of it either by actually "levitation", one above the other.

Apply a unique id to each div in which is now a picture.
Place each image in the background of the div, define in your CSS.
You will not then be able to use the image as a button, and you may want to add something to click on.

OR (this second way is preferable)

Change the . FilmStill definition by adding position: relative;
Change the . SlantedWritingFilms definition by adding position: absolute; and positioning attributes (left: 0; top: 0; for example)
Change to each . SlantedWritingFilms in one
within the
.

Beth

Reconcile the heights of two Div tags?

Hi all
Good then, I have two boxes with CSS styles. One is my nav side, floated on the left, clear: both (width: 213) and placed under a model div locked (with a height and width), floated to the left. The other is the content div (width: 696), floating to the right. The content div increases as text is added and has no fixed height.
The problem is I want the nav div height to match the current height of the content div. Because they do not have the same part of the page, I have trouble reconciling the heights to match evenly. Ideally, I would like to the side nav div to grow as does the content div.
Any suggestions?

The technique of fake columns can be difficult for me because my site is not positioned absolutely.

Fake columns do not need to use APDivs. All you need is a width declared on your div #container and a BG image that is the same width.

EXAMPLE:

http://ALT-Web.com/templates/2-column-fixed-width-template.shtml

BG Image here

http://ALT-Web.com/images/GRN-BG.jpg

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
www.Alt-Web.com/
www.Twitter.com/ALTWEB
www.Alt-Web.blogspot.com

Height of page and the CSS

So, I found some old discussions on this, but the tutorial links posted are not well more. CSS has a way of forcing something to live up to the browser? And if so what is the way to force an element to squeeze the bottom of the page?
EXAMPLE:
If the content of the page is only 400px, but the browser window is high 700px. How can I force a container div to 700px and then expand "float" (if you want) my footer div at the bottom of this?
I am sure that this can be achieved with the help of javascript and the DOM, but I was curious to know if anyone knows a way THAT CSS can handle this
Thank you!

How to force a page to be the height of the browser is:
```
html {
  height: 100%;
}
```
To the best of my knowledge, it works in all modern browsers.

To put something at the bottom of the page, you can use this:
```
#footer {
  position: fixed;
  bottom: 0;
}
```
It works in all modern browsers, except IE6. However, it puts the item at the bottom of the browser window, not at the bottom of the page. Other material scrolls behind the footer, you must make sure that the last element of the page has a sufficient amount of margin or padding on the bottom to prevent it to be hidden by the footer.

Float div for the text wrapping around - without width of the div setting?

Is it possible to get the text to wrap a div, without setting the width of the div?
If I float my div to the left and specify its width it works, but if I take the value of the width then the text wrapping will stop.
Thank you

Set the floating
width to Auto:

Width: auto;

Seems to work in Firefox, have'nt tested under IE. I usually put a fixed with.

The use of JavaScript to extend the height of a DIV at the height of a document or a page.

Hi all
How to use JavaScript to dynamically resize a DIV on a page, so that the div extends vertically to the size of the page or document.
I did experiences throughout the evening with different methods, some do not work yet.
Thank you all!
WE

This question is asked several times a week.

SAME HEIGHT CSS COLUMNS

Option 1. Start the project with equal height CSS Layout
     http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-CSS-no-hacks

Option 2. Use the Faux column method (vertical tiled background image)
     http://forums.Adobe.com/message/2653416#2653416

Option 3. Use of JavaScript
     http://www.Projectseven.com/Tutorials/CSS/pvii_columns/index.htm

Each solution has advantages and disadvantages. Use the one that best meets your needs.

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB

float and the height of the div

Similar Questions

w@charset "UTF-8";

Maybe you are looking for