Image at the left and the texts at the right
In this the image will be placed on the left side of the page whereas
the text will be placed on right side of the page i.e. the image and the
text will be placed side by side.
Html :
<html><head>
<title>Image at the left and the texts at the right </title>
</head>
<body>
<div class="container">
<div class="column-left">
<img src="http://www.hdwallpapers.in/walls/beautiful_lovely_scenery-HD.jpg" width="300px" height="200px" />
</div>
<div class="column-right">
<h1>Image and Text(Side by Side)</h1>
<p>Beautiful mountain</p>
</div>
</div>
</body>
</html>
CSS :
.container {
position: relative;
height: 200px;
padding 10px 0;
}
.column-left {
position: absolute;
background: #AAA;
height:200px;
width:300px;
}
.column-right {
display: table-cell;
vertical-align: middle;
height: 200px;
padding-left: 310px;
}
position: relative;
height: 200px;
padding 10px 0;
}
.column-left {
position: absolute;
background: #AAA;
height:200px;
width:300px;
}
.column-right {
display: table-cell;
vertical-align: middle;
height: 200px;
padding-left: 310px;
}
Output :
The output the above code is shown below.
You can check the code and the output here - http://jsfiddle.net/karthikkumar09/B9enL/
No comments:
Post a Comment