Solved

CSS alignment trouble!

Posted on 2012-04-04
2
133 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
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
text on slider doesn't resize nicely 5 56
CSS z-index issue 3 31
Centered Image 2 27
change button location when you go on your cellular device 21 29
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

785 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