2 replies [Last post]
needy
Offline
Enthusiast
australia
Last seen: 12 years 51 weeks ago
australia
Timezone: GMT-1
Joined: 2007-06-11
Posts: 95
Points: 0

Hello again - Still chipping away at this basic but baffling site (for me). I am wanting to get the images to expand or contract with the wrapper - at the moment I have tried text of the same colour as the wrapper after the images to hold the wrapper so that the colour extends past the images on the bottom. But, that is a rubbish solution. What am I missing - I thought that the #wrapper was the parent of #images_archive and therefore they were sitting within it as the text on my index pg stretches the wrapper? The height:auto on the #wrapper did nothing - what basic am I missing? Perhaps this question should be in the beginners section? I've included the core style css first which is imported to the page in question.
thanks

body { margin: 0px; padding: 0px; font-family: Helvetica, Arial, sans-serif; background-image: url(../images/sitedecoration/ricepaper2.gif); }

#wrapper {
position: relative;
margin-left: 60px; margin-right: 60px; margin-top: 20px; margin-bottom: 20px;
font-size: 1em;
background-color: #b5b594;
border: 1px #f7f7f7 solid;
}

#header {
margin: 0px;
border-bottom: 1px #f7f7f7 solid; }

#header p {
font-size: 90%;
padding-top: 20px; padding-right: 25px;
text-align: right;}

#header p span.logo {
color: #ad1008;
font-size: 150%; }

#menu2 {
margin-left: 25px; margin-top: 70px;
width: 170px;
float: left; }

#menu2 ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: right;
font-size: 80%; }

#menu2 ul li {
padding-top: 10px;
padding-bottom: 10px; }

#menu2 ul li a:hover {
color: #ad1008;
display: block;}

#menu2 ul li.logo {
color: #f7f7f7;
font-size: 130%;
padding-bottom: 10px; }

#menu2 ul li.home a {
color: #79b900; }

#image {
margin-left: 300px;
margin-top: 60px; }

#blurb {
color: #333333;
text-align: justify;
font-size: 90%;
line-height: 1.5em;
padding-right: 50px; padding-left: 50px; padding-top: 15px; }

#blurb span.firstword {
font-size: 100%;
font-weight: bold; }

#blurb span.title {
font-size: 80%; }

#blurb span.reference {
color: #ffffff;
font-style: italic;
font-size: 95%; }

#dater {
color: #b52110;
font-size: .6em;
font-family: sans-serif;
margin-top: -15px;
text-align: right;
margin-right: 60px; }

.copyright {
padding-left: 25px; }

a:link {
color: #000;
text-decoration: none; }

a:visited {
color: #4c4c4c;
text-decoration: none; }

@import url(core_style.css);

#images_archive {
margin-left: 250px;
text-align: center;
margin-top: 60px; }

#images_archive ul {
padding:0;
margin:0;
list-style-type:none; }

#images_archive li {
float: left;
width: 150px;
height: 150px; }

#images_archive img {
border: 1px #000000 solid; }

a:visited {
color: #4c4c4c;
text-decoration: none; }

archive








  • fall

  • cover scatter

  • 3 poles

  • pines park edge

  • road edge

  • location 1

  • gymea lily cmy five

  • cow skull on vellum

  • coke oven

  • tony by his work





wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

without digging too deep

without digging too deep into your code I'm guessing it's a float containment issue. Do a search on clearing or containing floats for more info, but for now add overflow: hidden; to #images_archive ul

needy
Offline
Enthusiast
australia
Last seen: 12 years 51 weeks ago
australia
Timezone: GMT-1
Joined: 2007-06-11
Posts: 95
Points: 0

containment issue - SOLVED

Thanks Wolfcry911 - just getting the right term to research "containment issue" did the trick - I found this web blog with several solutions.
cheers
Needy

http://www.ejeliot.com/blog/59