Solved

CSS alignment trouble!

Posted on 2012-04-04
2
137 Views
Last Modified: 2012-04-05
I need the Post box to be top left and the two other boxes to be on the right (doesn't matter which is top).

Currently i'm using the following CSS. I'm guessing my floats and clears are wrong but i'm not sure what they should be?

Thanks in advance!

.blogpost {
	background-color: #FFF;
	float: left;
	width: 70%;
	margin-left: 10px;
	padding: 20px;
	margin-bottom: 10px;
	box-shadow: 0 0 3px #cdcdcd;
	clear: left;
}

.blogrecent {
	background-color: #FFF;
	float: right;
	width: 27%;
	margin-left: 10px;
	padding: 20px;
	margin-bottom: 10px;
	box-shadow: 0 0 3px #cdcdcd;
}
.blogcategory {
	background-color: #FFF;
	width: 27%;
	margin-left: 10px;
	padding: 20px;
	margin-bottom: 10px;
	box-shadow: 0 0 3px #cdcdcd;
	float: right;
}

Open in new window

Screen-shot-2012-04-04-at-21.39..png
0
Comment
Question by:BrighteyesDesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 4

Expert Comment

by:TechHelpr08210
ID: 37808494
I changed your padding to percentages and slightly reduced the size of the main column.

Try this code:

<style>
.blogpost {
	background-color: #FFF;
	float: left;
	width: 66%;
	margin-left: 10px;
	padding: 1%;
	margin-bottom: 10px;
	box-shadow: 0 0 3px #cdcdcd;
}

.blogrecent {
	background-color: #FFF;
	float: right;
	width: 27%;
	margin-left: 10px;
	padding: 1%;
	margin-bottom: 10px;
	box-shadow: 0 0 3px #cdcdcd;
}
.blogcategory {
	background-color: #FFF;
	width: 27%;
	margin-left: 10px;
	padding: 1%;
	margin-bottom: 10px;
	box-shadow: 0 0 3px #cdcdcd;
	float: right;
}

</style>

Open in new window



Be sure to let me know if this solution doesn't work for you.

Take care!
0
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 37809484
The CSS:

<style type="text/css">
body {
margin:0px;
}
.blogpost {
	background-color: #00FF00;
	float: left;
	width: 70%;
	box-shadow: 0 0 3px #cdcdcd;
	margin-left: 1%;
	border: thin solid #9966FF;
	padding-top: 20px;
	padding-bottom: 20px;
	text-indent: 20px;
}

.blogrecent {
	background-color: #FFF;	
	margin-bottom: 10px;
	box-shadow: 0 0 3px #cdcdcd;	
	padding: 20px;
}
.blogcategory {
	background-color: #FFF;	
	box-shadow: 0 0 3px #cdcdcd;	
	padding: 20px;
}

.right_wrapper {
	float: left;
	width: 27%;	
	margin-left: 1%;
}
</style">

Open in new window


The HTML:

<div class="blogpost">blogpost</div>
<div class="right_wrapper">
<div class="blogcategory">blogcategory</div>
<div class="blogrecent">blogrecent</div>
</div>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question