Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create a Two-Column Div Layout with the Right Column Having Fixed Width?
The <div> element is one of the most widely used elements in HTML. The term "<div>" refers to a container that divides the page into sections. These sections are extremely useful for grouping elements together. <div> elements don’t inherently have a visual representation, but they are very useful when we want to apply custom styles to our HTML elements. They allow us to group elements to apply the same styles for all elements inside. We can also style the entire div> element. It is simple to style by using the class or id attribute.
Example
Here is a simple example showing the purpose of the div tag.
<html>
<head>
<style>
.div1{
background-color:lightblue;
width:300px;
height:75px;
margin-bottom:-16px;
}
.div2{
background-color:lightpink;
width:300px;
height:30px;
margin:0px;
}
</style>
</head>
<body>
<div class="div1">
<p>DIV 1</p>
</div>
<div class="div2">
<p>DIV 2</p>
</div>
</body>
</html>
We can also have two div elements adjacent to each other. It is referred to as a two- column div layout. This can be achieved by using the CSS float property.
The CSS float property positions an element to the left or right of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, but it remains in the flow. The float property is specified as a single keyword from a list of values namely left, right, none, inline-start and inline-end.
Example
The example below shows the creation of a two-column div layout with the help of the float property.
<html>
<head>
<style>
.div1{
background-color:lightblue;
width:300px;
height:75px;
margin-bottom:-16px;
float:left;
}
.div2{
background-color:lightpink;
width:100%;
height:75px;
margin:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
<p>DIV 1</p>
</div>
<div class="div2">
<p>DIV 2</p>
</div>
</div>
</body>
</html>
The height and width of the div elements can be adjusted according to the requirement and can also be fixed to a certain dimension.
In this tutorial we will discuss a method to create a two-column div layout with the right column having a fixed width.
Using CSS Float and Width Properties
As discussed earlier, the float property is used for the positioning and formatting content. It can be used to wrap any inline element around a specified HTML element, such as lists, paragraphs, divs, spans, tables, iframes, and blockquotes.
The width property specifies an element’s width. It determines the width of the content area by default, but if box-sizing is set to border-box, it determines the width of the border area.
We can create a two column div layout with a fixed width for the right column by setting the float and width properties of the right column while ensuring that the left column does not have a width and float.
Example
In the following example, we set the float property to right for the right column so that it floats to the right of the container with a pre-defined fixed width. The width of the left column is set to auto which allows the browser to calculate the width.
<!DOCTYPE html>
<html>
<head>
<title>
How to Create a Two-Column Div Layout with the Right Column Having Fixed Width?
</title>
<style>
body{
margin:20px;
}
.container {
height: auto;
overflow: hidden;
}
.div2 {
width: 150px;
height:50px;
float: right;
background: darkcyan;
}
.div1 {
height:50px;
width: auto;
overflow: hidden;
background:turquoise;
}
p{
margin-top:15px;
margin-left:20px;
font-size:20px;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="div2">
<p>DIV 2</p>
</div>
<div class="div1">
<p>DIV 1</p>
</div>
</div>
</body>
</html>
The above example makes it necessary to put the right column before the left one. However, if we want to follow the correct HTML markup, we can try the example below.
Example
The following example helps us in creating a two column div layout without tweaking the HTML markup.
<html>
<head>
<title>How to Create a Two-Column Div Layout with the Right Column Having Fixed Width?
</title>
<style>
body{
margin:30;
background:lightblue;
}
.container {
width: 100%;
background: lavender;
float: left;
margin-right: -200px;
}
.div1 {
background: lavenderblush;
margin-right: 155px;
border:3px solid purple;
}
.div2 {
width: 150px;
float: right;
border:3px solid purple
}
p{
margin-left:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
<p>DIV 1</p>
</div>
</div>
<div class="div2">
<p>DIV 2</p>
</div>
</body>
</html>
90 Views
