I often need to layout my contents in two blocks side-by-side, with left side block as a warning message as example. This can be done easily by using CSS and HTML. Here are the tips.
Example layout
First, let's look at the example layout. To visualize the side-by-side blocks, I added a border container, which can be removed.
First DIV block on the Left
When using percentages, you usually have to play around a bit to get things to look the same in IE, Safari, Chrome and Firefox.
Right block
This is a tutorial on how to use CSS to create a simple two column layout.
The styles for the blocks are defined in CSS classes in the <head> section of HTML.
This the end of 2 column side by side layout.
Define CSS classes
Define the following style classes in HTML head section:
<head>
...
<style type="text/css">
....
.boxLeft {
float:left;
width:20%;
border:1px solid;
padding: 1%;
margin:1% 0 1% 1%;}
.boxRight {
float:right;
margin: 1% 1% 1% 1%;
width:75%;}
.clear {
margin: 0;
padding: 0;
clear: both; }
...
</style>
...
</head>
Use CSS classes to layout 2-blocks side-by-side
With above CSS classe definitions, they can be used in the body section to layout 2 blocks of text side-by-side:
<body >
...
<!-- containner -->
<div style="border:2px solid;">
<!-- Left block -->
<div class="boxLeft" style="background:green">
<h2>First DIV block on the Left</h2>
<p>When using percentages, you usually have to play around a bit to get things to look the same in IE, Safari, Chrome and Firefox.</P>
</div>
<!-- end of left block-->
<!-- right block -->
<div class="boxRight" style="background:#dff">
<h2 >Right block</h2>
<p>This is a tutorial on how to use CSS to create a simple two column layout.</P>
<p>The styles for the blocks are defined in CSS classes in head section of HTML.</p>
</div><!-- end of box block -->
<div class="clear"></div>
</div><!-- container -->
<div>
<p>This the end of 2 column side by side layout.</p>
...
Posts
0 comments:
Post a Comment