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:

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

Quote:

Originally Posted by SB65

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

Code:

<!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

Quote:

Originally Posted by tracknut

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.