Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 151
  • Last Modified:

CSS alignment trouble!

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
BrighteyesDesign
Asked:
BrighteyesDesign
1 Solution
 
TechHelpr08210Commented:
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
 
HagayMandelCommented:
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

Industry Leaders: 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!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now