Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    CSS Problem - Believe it could be floats

    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;
    }
    Attached Thumbnails Attached Thumbnails CSS Problem - Believe it could be floats-floats.jpg  
    Don't Click Here!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Need to see your html, or preferably, a link to your page.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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>
    Don't Click Here!

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,234
    Thanks
    10
    Thanked 270 Times in 269 Posts
    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

  • Users who have thanked tracknut for this post:

    aaronoafc (01-20-2013)

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    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
    Don't Click Here!

  • #6
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    BTW, very clean CSS. Kudos.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •