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;
}
Help with text clinging to image
Possibly a float:left here?
.block2 {
padding-top: 0px;
margin-top: 0px;
margin-left: 0px;
text-align: justify;
}
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?