...

View Full Version : CSS Problem - Believe it could be floats



aaronoafc
01-20-2013, 03:41 PM
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:


/****************
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;
}

SB65
01-20-2013, 03:55 PM
Need to see your html, or preferably, a link to your page.

aaronoafc
01-20-2013, 04:04 PM
Need to see your html, or preferably, a link to your page.

Sorry thought I did, the codes just all in sublime text 2 atm, it's a poor site just creating a little mockup practice practice practice :)


<!DOCTYPE html>
<html>
<head>
<title>Oldham Athletic Blog!</title>
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>

<div id="wrapper">

<div id="header">
<h1>Oldham Athletic Blog!</h1>
<h2>The life of an Oldham fan</h2>
</div>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Forum</a></li>
</ul>


<div id="content">

<div class="post">
<h3>First Post</h3>
<img src="images/nottingham_win.jpg" class="pic1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mollis eros, nec laoreet sapien bibendum vitae. In at iaculis ipsum. Nunc vitae tortor vitae elit molestie porttitor quis nec justo.</p>
</div>

<div class="post">
<h3>Second Post</h3>
<img src="images/baxter_dickov.jpg" class="pic2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mollis eros, nec laoreet sapien bibendum vitae. In at iaculis ipsum. Nunc vitae tortor vitae elit molestie porttitor quis nec justo.</p>
</div>

<div class="post">
<h3>Third Post</h3>
<img src="images/new_badge.jpg" class="pic3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mollis eros, nec laoreet sapien bibendum vitae. In at iaculis ipsum. Nunc vitae tortor vitae elit molestie porttitor quis nec justo.</p>
</div>

</div>

<div id="sidebar">
<div class="section">
<h3>Latics to play Liverpool!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices lacinia elit eget placerat. Nullam aliquet, erat ac auctor placerat.</p>
</div>

<div class="section">
<h3>Too early for Daniel Taylor?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices lacinia elit eget placerat. Nullam aliquet, erat ac auctor placerat.</p>
</div>

</div>

</div>
</body>






</html>

tracknut
01-20-2013, 04:28 PM
When your images are floated, they are not constrained to be within the parent container unless you do something to force them inside. I would put a "overflow:auto" on your .post class to do this.

Dave

aaronoafc
01-20-2013, 04:32 PM
When your images are floated, they are not constrained to be within the parent container unless you do something to force them inside. I would put a "overflow:auto" on your .post class to do this.

Dave

Cheers buddy that's sorted it

jerry62704
01-22-2013, 03:21 PM
BTW, very clean CSS. Kudos.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum