hoponhiggo Posted July 5, 2011 Share Posted July 5, 2011 Hi Guys Im still learning CSS and this is my first attempt at using floats etc to layout my design, but i have hit a wall. What i am trying to acheive - see attachment 1 what i have so far - see attachment 2 my code: #cardcontainer { text-align:left; background-color:#FFFFFF; padding:10px; width:440px; margin:auto; margin-top:50px; height:150px } .coverart { width:100px; height:140px; float:left; } .gametitle { margin-left:20px; height:20px; word-wrap:break-word; overflow:hidden; padding:5px; display:block; font-size:12px; width:300px; } .friendrating { margin-left:50px; height:50px; word-wrap:break-word; overflow:hidden; padding:5px; display:block; font-size:12px; width:115px; margin-top:10px; margin-bottom:10px; } .globalrating { margin-left:50px; height:50px; word-wrap:break-word; overflow:hidden; padding:5px; display:block; font-size:12px; width:115px; margin-top:10px; margin-bottom:10px; } As you can see, i am having trouble positioning .globalrating to the left of .friendrating. Can anybody please advise? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 5, 2011 Share Posted July 5, 2011 do you have some html mark up with this or even better an online example? Quote Link to comment Share on other sites More sharing options...
hoponhiggo Posted July 5, 2011 Author Share Posted July 5, 2011 only very basic html so far: <body> <div id="cardcontainer"> <div class="coverart"></div> <div class="gametitle"></div> <div class="friendrating"></div> <div class="globalrating"></div> </div> </body> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 5, 2011 Share Posted July 5, 2011 Some colors are often a bit more useful when shaping things up. Have a look at the following mark-up and css. And next time try to isolate the problem in 1 piece of code like below saves you and others some time. I recreated it with the following in mind. The container: Your image shows 1 container with a the same amount of space between the border and the child elements. So i gave the container a bit of padding. The left side Your image shows a fixed height and width floated to the left with a margin at the right side. so we just make that. The right side Your image shows that #friendrating, #globalrating are exactly the same no need to declare anything different for them except for a color maybe. and that's it try it out and learn from it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title></title> <style type="text/css"> #cardcontainer{width:500px;margin:0 auto; overflow:hidden; padding:10px;background:gray;} #coverart{width:200px; height:200px;background:yellow; float:left;margin-right:10px;} #right{overflow:hidden;} #gametitle{width:290px;height:40px;margin-bottom:10px;background:red; float:left;} #friendrating, #globalrating{background:green; float:left; width:100px; height:150px;margin-left:30px;} #globalrating{ background:orange;} </style> </head> <body> <div id="cardcontainer"> <div id="coverart"></div> <div id="gametitle"></div> <div id="friendrating"></div> <div id="globalrating"></div> </div> </body> </html> another thing to have a look in to is a "grid system". your template is far from ordered if i am honest it could be much better aligned. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.