Drupal: .htaccess Access Deny
August 21, 2014 – 7:59 am | No Comment

In this article I will tell how to forbid access to certain resources for some clients. The instructions will include descriptions of different directives.

Read the full story »
CSS Templates

Contain reviews and news about CSS Templates.

Freebies

Contain freebies such as icons, graphics, headers and images for your websites.

Fun Stuff

Contains other fun stuff for entertainment or interesting site showcase.

How-To

Contain technical elaborations on some specific workarounds or common tweak.

Joomla Templates

Contains reviews and news about Joomla templates.

Home » How-To

Horisontal Alignment of Elements

Submitted by on September 22, 2010 – 4:03 amNo Comment

This article would tell you how to horizontalize page elements.

There can be a few cases. Let’s consider all of them:

Horizontal centering of a block with fixed weight

<div id=”wrapper”>
<div id=”main”>
Content
</div>
</div>

#wrapper{
width:100%;
}
#main {
margin:0 auto;
width:100px;
}

Alternative:
Attention: when size of browser window is less than size of centered DIV, element will be out of the screen.

html, body{
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container{
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px;
}

Horizontal alignment of a block with optional width

<div id=”wrapper”>
<div id=”outer”>
<div id=”main”>
Content
</div>
</div>
</div>

#wrapper{
width:100%;
}
#outer{
float:left;
left:50%;
position:relative;
}
#main {
left:-50%;
position:relative;
}

Horizontal alignment of a string element

You can make this element block element and use one of the solutions above.

#main{
display:block;
}

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.