Scribd
Upload
35 views2 pages

Module2-Advanced Css

The document outlines techniques for creating multi-column layouts in web pages, specifically using 'float' and 'position'. It provides an example of a layout using 'float' with HTML code and describes how to adjust margins for proper alignment. The document also hints at using 'position' for layout but does not elaborate further.

Uploaded by

1DT19CS032 Chethana T S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views2 pages

Module2-Advanced Css

The document outlines techniques for creating multi-column layouts in web pages, specifically using 'float' and 'position'. It provides an example of a layout using 'float' with HTML code and describes how to adjust margins for proper alignment. The document also hints at using 'position' for layout but does not elaborate further.

Uploaded by

1DT19CS032 Chethana T S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Constructing Multi-column layout:-

Techniques for creating multi-column layouts in a web page are:-

i) Using Float

ii) Using position

i) Using Float:-

it is the most common way of creating multicolumns of contents. Consider the given
code and its representation in normal flow.

<html>

<head>

<Title> Dsatm</title>

<style>

#main{ border:1pt solid black; }

</head>

<body>

<h1>cse department</h1>

<figure><img src=”logo.jpg”/>

<div id=”main”>

<p> web programming</p>

<p>machine learning</p>

</div>

<footer>Contact @dsatm.edu.in</footer>

</body> </html>

The above example can be represented diagrammatically as shown below.


After including “float” with the adjustment on left and right margins the layout appears as follows:

nav { … width: 12em; float: left; }

div#main { … margin-left: 220px; }

ii) Using Position:-

You might also like