2 replies [Last post]
LisaP
Offline
Regular
Michigan
Last seen: 10 years 49 weeks ago
Michigan
Timezone: GMT-4
Joined: 2004-07-11
Posts: 15
Points: 0

Hello,

On this page I have 2 types of pictures with an associated paragraph. I've been able to figure out the single person image and the paragraph. However, I'd like the larger images to be on one line and have the text go below it flush with the pictures left margin. Instead the text is clinging to the image on the right of it then wrapping to below. When I enlarge the image to fit the entire with of the div it really screws it up and drops all of the left elements way below it.

The link is http://www.357limes.com/nscsite/contactpeople.html

Any thoughts??
Thank you!

Here's the css:
/* CSS Document */

#content {
width: 768px;
border-top-width: 6px;
border-top-style: solid;
border-top-color: #333399;

}
#picturebar {
border: 1px solid #FFFFFF;
background-image: url(images/nscpicturebar.gif);
height: 80px;
width: 766px;
}

.return{
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#primarynavbar {
background-color:#3366CC;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
padding-left:20px;
}

#primarynavbar ul{
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
}

#primarynavbar ul li {
display: inline;
}

#primarynavbar ul li a {
text-decoration: none;
color: #FFF;
padding-right:30px;
}

#primarynavbar ul li a:hover {
color: #000000;
}

#middle {
background-color:#CCCCFF;
width:446px;
height:551px;
float:left;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
padding-top: 25px;
padding-right: 15px;
padding-left: 15px;
}

#middle p {
margin-top: 10px;
padding-top: 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}

#middle ul {
display: block;
margin:0px;
padding-left:30px;
padding-bottom:0px;
}

.newsdate {
font-weight:bold;
}

.newssource {
font-style:italic;
}

#secondarynav {
background-color:#336699;
width:289px;
float:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
padding-top: 15px;
padding-bottom: 15px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
line-height: 26px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}

#secondarynav ul {
list-style-type: none;
display: block;
list-style-image: none;
margin:0px;
padding-left:20px;
}

#secondarynav ul li a {
color: #CCCCFF;
text-decoration: none;
font-weight: normal;
}

#secondarynav ul li a:hover {
background-color: #3366CC;
}

.thispage {
background-color: #3366CC;
}

.arrow {
color: #66FF33
}

#sidepicture {
width:289px;
float:left;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}

#organizationbox {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
float:left;
width: 289px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
color: #0000CC;
text-align: center;
margin-top: 4px;
padding-top: 4px;
height: 133px;
}

h2 {
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
}

.subtitle {
font-weight: bold;
font-size:16px;
color: #333399;
}

.text3 {
color: #333399;
font-weight: bold;
font-size: 12px;
padding-top: 5px;
padding-bottom: 4px;
margin-bottom: 4px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
}

h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
color: #000000;
text-align: center;
}

#footer {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
height: 20px;
width: 758px;
padding-left: 10px;
background-color: #333399;
padding-top: 2px;
float:left;
}


#footer ul{
color: #FFFFFF;
margin:0px;
padding:0px;
list-style-type:none;
text-align:left;
padding-left: 90px;
}

#footer ul li {
display: inline;
padding-right:10px;
}

div#footer a {
color:#FFFFFF;
}

div#footer a:visited {
color:#FFFFFF;
}


.copyright {
text-align: right;
}

#beneathfooter {
height: 25px;
width: 750px;
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 11px;
color: #000;
text-align: right;
padding-top: 3px;
padding-right: 50px;
padding-bottom: 0px;
float:left;
}


#calendar {
background-color:#CCCCFF;
width:738px;
height:520px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
padding: 40px 15px 15px;
}
.calendartitle {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #333399;
margin-top: 0px;
margin-bottom: 20px;
}
.addlink {
font-size: 10px;
font-style: italic;
margin-bottom: 10px;
line- height: 30px;
}a
.prevnext {
margin-top: 10px;
padding-bottom: 10px;
}

.block {
padding-top: 0px;
margin-top: 0px;
margin-left: 142px;
text-align: justify;
}

.block2 {
padding-top: 0px;
margin-top: 0px;
margin-left: 0px;
text-align: justify;
}

speedbird
Offline
newbie
UK Northwest
Last seen: 8 years 33 weeks ago
UK Northwest
Timezone: GMT+1
Joined: 2004-08-02
Posts: 4
Points: 0

Help with text clinging to image

Possibly a float:left here?

.block2 {

padding-top: 0px;

margin-top: 0px;

margin-left: 0px;

text-align: justify;

}

three
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT-7
Joined: 2004-03-18
Posts: 8
Points: 0

Help with text clinging to image

how about a hr after the image. you could even use negative margins with the hr i think. floats do seem like a better way though.

hr {
visibility:hidden;
margin-top:0;
margin-bottom:0;
}

why did you nest your paragraphs?