World is Welcome To The World of Linux

Journey into the world of linux

Menu
  • About
  • Welcome
Menu

How To Align Two Boxes using CSS!

Posted on May 27, 2010January 17, 2019 by Ganesh Sharma

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

We are writing this article for the alignments of two boxes using css. We hope this article will be useful for those want to align the boxes in similar way.  Top- bottom, left –right, and together. We have used the FLOAT property to align these boxes. This is very easy….

Method1 …Top-Bottom

Just copy and paste the following code into your css file , only need to change name of id according to your requirement.. Then you will see two boxes aligned like this… We have used #box1 and #box2 as their id name

The name of the css file is xyz.css

#box1 {

position:relative;

height:50px;

width:500px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: red;

}

#box2 {

position:relative;

height:50px;

width:200px;

border-style: groove;

border-color: pink;

}
Box1
Box2

You can also see more detail for css positioning in article “Css Positioning Tips And Tricks.”

Method 2  Left and Right

#lbox1 {

position:relative;

height:50px;

width:200px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: red;

float: left;

}

#box2 {

position:relative;

height:50px;

width:200px;

border-style: groove;

border-color: pink;

float : left;

}

It will show output like…

Box1
Box2

Method3

If you wanted to place these boxes together simply change the right margin of Box1 or left margin of  Box2.

#box1 {

position:relative;

height:50px;

width:200px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: red;

float: left;

}

#box2 {

position:relative;

height:50px;

width:200px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: pink;

float : left;

}

Output will be like this…

Box1
Box2

We hope these methods will work for you.. Good Luck…

1 thought on “How To Align Two Boxes using CSS!”

  1. Albetina says:
    June 25, 2010 at 12:08

    Hello, thanks for visit and comment on my blog, your blog is very good, I always visit now. have a nice day and a great weekend. bjs. my blog http://sensuaisegatas.blogspot.com

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Date Command Tutorial(Video)
  • grep Command Tutorial – 1(Video)
  • Introduction To ls Command(Video)
  • Chapter 3
  • Set Position Of Poll Module Into Joomla

Recent Comments

  • Kansas City Trailer Proz on Physical Volume In AIX – A Primer
  • Create volume group in AIX | myunixsheet on How To Create Volume Group
  • Restore of AIX backup on other Unix system - TecHub on What is mksysb And What Are Its Components
  • Firewall Unleashed - InfoSec Institute on Packet Filtering Firewall: An Introduction
  • Manwendra on Proxy Firewall and Gateway Firewall: Introduction

Archives

  • January 2019
  • June 2010
  • May 2010
  • February 2010
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008

Categories

  • 30 Days To Joomla WebSite Setup
  • A Journey To The World of Linux System Administration
  • Aix
  • Backups
  • Books
  • Firewalls
  • Introduction
  • Joomla
  • Joomla Backup
  • Joomla Web Technology
  • Linux
  • LPAR and Virtualization
  • LVM
  • Pluggable Authentication Modules
  • section navigator pro
  • Security
  • Security Knowledge Base
  • Tips and Tricks
  • Uncategorized
  • World is Welcome Products

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
©2023 World is Welcome To The World of Linux | WordPress Theme by SuperbThemes