Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Split page vertically using CSS

Tags:

html

css

Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines

<div style="width: 100%;">     <div style="float:left; width: 80%">     </div>     <div style="float:right;">     </div> </div> 

Although this 'mostly' works it seems to mess up the other elements on the page below it.

So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?

like image 517
Maxim Gershkovich Avatar asked Jul 26 '12 04:07

Maxim Gershkovich


People also ask

How do you split a HTML page into two parts vertically?

To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line.

How do I split a page horizontally and vertically in HTML?

The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame.

How do I split a page in HTML and CSS?

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag.


2 Answers

you can use..

<div style="width: 100%;">    <div style="float:left; width: 80%">    </div>    <div style="float:right;">    </div> </div> <div style="clear:both"></div> 

now element below this will not be affected.

like image 185
Ashwini Agarwal Avatar answered Sep 30 '22 16:09

Ashwini Agarwal


Just add overflow:auto; to parent div

<div style="width: 100%;overflow:auto;">     <div style="float:left; width: 80%">     </div>     <div style="float:right;">     </div> </div> 

Working Demo

like image 42
bugwheels94 Avatar answered Sep 30 '22 18:09

bugwheels94