| aaronoafc |
01-20-2013 03:41 PM |
CSS Problem - Believe it could be floats
1 Attachment(s)
Afternoon guys,
as you will see in the screenshots the images are all over the place...I've re-sized them using css as the original pics are huge, but i want them to be to the right of the text and to fit inside the blue boxes...any idea why they dont?
CSS code:
Code:
/****************
Page Styles
****************/
body {
margin:0;
background:#003DF5;
font-family:Arial, sans-serif;
font-size:0.8em;
}
#wrapper {
width:960px;
margin:0 auto;
}
p {
line-height:1.5em;
color:#FFF;
}
a:hover {
text-decoration:none;
}
/****************
Header
****************/
#header {
float:left;
margin:20px 0;
}
#header h1 {
font-size:3em;
margin:0;
color:#FFF;
}
#header h2 {
margin:0;
color:#FFF;
font-size:1.4em;
}
/****************
Navigation
****************/
#nav {
list-style:none;
padding:0;
float:right;
margin:40px 0;
}
#nav li {
float:left;
margin:14px;
font-size:1.4em;
}
#nav li a {
color:#FFF;
text-decoration:none;
}
#nav li a:hover {
color:yellow;
}
/****************
Content
****************/
#content {
float:left;
width:660px;
margin-right:20px;
}
#content .post {
background:#33A1C9;
padding:10px;
margin-bottom:20px;
border:2px solid #ccc;
}
#content .post h3 {
margin:0;
color:#ccc;
font-size:1.4em;
}
#content .post h3:hover {
color:yellow;
}
.pic1 {
margin-left:10px;
float:right;
width:300px;
height:200px;
}
.pic2 {
margin-left:10px;
float:right;
width:300px;
height:200px;
}
.pic3 {
margin-left:10px;
float:right;
width:300px;
height:200px;
}
/****************
Sidebar
****************/
#sidebar {
float:left;
width:200px;
padding:10px;
background:#33A1C9;
border:2px solid #ccc;
}
#sidebar h3 {
color:#ccc;
font-size:1.4em;
margin:0;
}
|
