Geek Answers Handbook

Half Page + CSS Alignment

I did not know how to explain, but I will draw the CSS alignment image that I need. The template has a fixed width, and the green area represents the main content, and the blue division provides the title for this page.

Green divhas the following css:

#content {
  width: 980px;
  margin: 0 auto;
}

This works great for the green box, but I don't know how to make the blue section. To do this div, close the right side of the page + the entire width of the green area, as shown in the figure below.

Remember that the user can resize the window so that the width of the blue bit cannot be fixed!

How can I achieve this using pure CSS ?

http://img15.imageshack.us/img15/3884/cssalign.png

+5
source share
2 answers

Like in the picture!

Css:

#title{
   position:relative;
   width:50%;
   margin:50px 0 50px 50%;
   background:blue;
   padding:25px 245px;
   left:-490px;
}
#content{
     width:980px;
     height:600px; /* for it to work with no content */
     margin:0 auto;
     background:green;
}

Html:

<div id="title"></div>
<div id="content"></div>

DEMO : http://jsfiddle.net/sparkup/jL10axxv/

+8
source

Main outline: give them the same position left, give the green color to any fixed width you want, and give the color blue right: 0.

0
source

More articles:


All Articles