Align div right and contents center

HTML & CSS
1

hi guys,
how do I

  1. Align a div to the right ? I have the code below, as I want my div 20% of a 30% space, but aligned to the right within the page, as that I have a margin on the left.

Here is my code

.CPH_left {

    float: left;
    width: 25%;
    height: 900px;
    margin: 0 auto;
    align-content:center;
    align-content:center;
     box-shadow: 3px 3px 10px 5px #000; /* */
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,8);
    box-shadow: 0px 0px 10px rgba(0,0,0,13);
    border-radius: 10px;
    -moz-border-radius: 10px;
}
  1. I have a sitemap in the div, that does not seem to be able to move from the left side of the page.

How do i align it to the center ?

thanks

M

2

Please post a full example template so we can see what’s going on. Here’s an example: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics&p=5406274&viewfull=1#post5406274

Note also that this isn’t valid CSS:

align-content:center;
align-content:center;

So it won’t do anything.

3

here we go. Many thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="00.aspx.cs" Inherits="onenewday.delete._00" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <link href="../css/MainMasterPage.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="CPH_left">
    test
    </div>
         <div class="CPH_right">
    test
    </div>
    </form>
</body>
</html>

and css



.CPH_left {
    float: left;
    width: 25%;
    height: 900px;
    margin: 0 20px 0 auto;
    align-content: center;
    align-content: center;
    box-shadow: 3px 3px 10px 5px #000; /* */
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,8);
    box-shadow: 0px 0px 10px rgba(0,0,0,13);
    border-radius: 10px;
    -moz-border-radius: 10px;
}

.CPH_right {
    padding: 0px;
    border-style: solid;
    border-color: #00CC00;
    float: right;
    width: 69%;
    top: 0px;
    clip: rect(0px, auto, auto, auto);
    vertical-align: top;
    height: 900px;
    z-index: 0;
}
4

This is strange code.

What is the strange line of text above the doctype? It is causing the browser to go into quirks mode.

Are you writing XHTML or HTML5 code? The doctype says HTML5, but the html line suggests an XHTML page.

Why are these boxes laid out in a form element? Why are they not in a div?

What do you want to put in the middle of the right box with the green border and have centered? What kind of content is supposed to be be centered?

Why is “align-content: center;” still in the code? Twice? As mentioned by Ralph, it is invalid… not real css… home-made-up.

Why is “box-shadow” coded twice with different values? Redundant code. The lower rule replaces the upper rule. That’s the cascade effect.

What goes in the clip:rect which doesn’t look like anything is to be clipped? Is it necessary or is this a test?

In your first post, you said that you wanted a box aligned to the right. This green box is already aligned to the right. I do not understand why you are asking how to float/align a box to the right.

Are you trying to add a column in the left box that is right aligned within the left box?

Mary, if you do not have reasons/rationale for these things, then they probably are not needed, and maybe it would be more productive for you to explain what you are really trying to do.

At the very least, what kind of content is to be centered in the right box?

Do you have a working page that we can look at?

It isn’t simple enough, yet.

5

Its not strange code. lol.

Its a asp.net page, the 1st line is the page declaration for a c# asp.net page. You can remove it to load as a typical html 5 page.

Here is the code as a simple html page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="http://localhost:29846/content/css/Pages_Account.css" rel="stylesheet" />
    <title></title>
    <style type="text/css">
       .CPH_left {
    float: left;
    width: 25%;
    height: 900px;
    margin: 0 20px 0 auto;
    
    border-style: solid;
    border-color: #00CC00;
}

.CPH_right {
    padding: 0px;
    border-style: solid;
    border-color: #00CC00;
    float: right;
    width: 69%;
    top: 0px;
  height: 900px;
}
    </style>
</head>
<body>
  <div class="CPH_left">
    test
    </div>
         <div class="CPH_right">
    test
    </div>
     
     
</body>
</html>
6

sorry about the odd bits of code, I had been trying out so many things.

Basically I want both the right and left div to have a clear margin of maybe one or two inches space

many thanks

7

Add this to your code

margin-left: 35px;
8

oh

9

HI,

A more robust way to have two colums is only to float the first column and let the second column expand to fit.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.CPH_left {
	float: left;
	width: 25%;
	min-height: 900px;
	border:1px solid #0c0;
}
.CPH_right {
	margin-left:28%;
	zoom:1.0;
}
.CPH_right:after {
	content:" ";
	clear:both;
	height:0;
	display:block;
	visibility:hidden;
}
.inner {
	width:100%;
	float:left;
	border:1px solid #0c0;
	min-height: 900px;
}
</style>
</head>

<body>
<div class="CPH_left"> test </div>
<div class="CPH_right">
		<div class="inner">test</div>
</div>
</body>
</html>