How to split page into 4 equal parts?


Tags: html,css

Problem :

I want to divide my page into four equal parts, each of same height and width (50-50%).

I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.

I have not worked with CSS for a long time. I've no idea how to handle this.



Solution :

HTML

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

CSS

html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }

Demo at http://jsfiddle.net/CRSVU/


    CSS Howto..

    How to center a CSS Hexagon

    How do I remove column padding to have full-width inputs in Bootstrap 3?

    How to copy the GTK style of a widget and apply it to another?

    how can i force all rows in a table to have the same height

    How to extend width and height automatically when the data gets increased

    How can I get the
    div to properly wrap my two buttons?

    JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

    How to make each element to be fully independend with CSS?

    How to stretch background image of a table cell with CSS?

    How to get angled corner like this in CSS, it's not round?

    How to make a ruler scale in HTML and CSS

    How can I make it so that my logo on the top left of the page lines up with the text underneath it?

    How do I center all my elements?

    How to get content of a specific css column

    jQuery addClass based on how far scrolled

    CSS classes: base+additional. How to define?

    How would I detect CSS Transition support on :before pseudo-elements with javascript?

    How to apply local styles / JS to UIWebview after loading a URL

    dynamic drop down how to show success using css (tic icon)

    How to change or disable the alternating background colors in Google Prettify

    How can I add a css class to an updatepanel in ASP.Net?

    How to Style Social Media Links Correctly

    How to write conditional css?

    How can I use CSS borders to visually group my sections?

    How to link a main.css to all Django templates? [closed]

    How to create readonly textbox-like structure using html (div/span) and css?

    How to apply css class to uploaded image? [closed]

    How to find unused CSS from rails? deadweight not working [closed]

    How to change CSS display property using an anchor tag?

    how to edit a css selector in order to shorten the amount of characters used in file