- How to split page into 4 equal parts?
- 6 Answers 6
- Блочная верстка сайта
- Отличия блочной вёрстки от табличной
- Суть блочной вёрстки
- Принципы блочной вёрстки
- Пример блочной вёрстки
- header (шапка сайта)
- Блок навигации
- Левая панель
- Основной контент страницы
- footer (низ сайта)
- Как поделить одну страничку на два блока?
- Разделение страницы на 3 независимых вертикальных блока
- 2 ответа 2
- Как разделить один div на 4 одинаковые части?
- 5 ответов 5
How to split page into 4 equal parts?
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 ( 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.
6 Answers 6
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
It does. I just made this in notepad and viewed it using Firefox 15 and it’s fine in that. Rebuild it yourself if you like. I think the body tag is handled differently in jsfiddle and maybe the divs require some content.
@ScottBrown My apologies Scott, I get frustrated when people post answers which seem to have not been tested. I didn’t realise jsfiddle was an exception. I stand corrected!
Scott Brown and @thatuxguy, the original code did not work. You were taking advantage of Quirks Mode, by not putting at the beginning of the file. Throw that DOCTYPE in there, and you’ll notice the html is required as well. I’ve updated the answer.
If you want to have control over where they are placed separate from source code order:
html, body < height: 100%; margin: 0; padding: 0 >div < position: fixed; width: 50%; height: 50% >#NW < top: 0; left: 0; background: orange >#NE < top: 0; left: 50%; background: blue >#SW < top: 50%; left: 0; background: green >#SE
Note: if you want padding on your regions, you’ll need to set the box-sizing to border-box :
…otherwise your «50%» width and height become «50% + 2em», which will lead to visual overlaps.
Some good answers here but just adding an approach that won’t be affected by borders and padding:
html, body < width: 100%; height: 100%; padding: 0; margin: 0 >div < position: absolute; padding: 1em; border: 1px solid #000 >#nw < background: #f09; top: 0; left: 0; right: 50%; bottom: 50% >#ne < background: #f90; top: 0; left: 50%; right: 0; bottom: 50% >#sw < background: #009; top: 50%; left: 0; right: 50%; bottom: 0>#se
I do have one question why is bottom row bottom=0 and not 100%, same with right column, right = 0 and not 100%. As I said it works, just curious
I did not want to add style to tag and tag.
.quodrant < width: 100%; height: 100vh; margin: 0; padding: 0; >.qtop, .qbottom < width: 100%; height: 50vh; >.quodrant1, .quodrant2, .quodrant3, .quodrant4 < display: inline; float: left; width: 50%; height: 100%; >.quodrant1 < top: 0; left: 50vh; background-color: red; >.quodrant2 < top: 0; left: 0; background-color: yellow; >.quodrant3 < top: 50vw; left: 0; background-color: blue; >.quodrant4
.quodrant < width: 100%; height: 100vh; margin: 0; padding: 0; >.qtop, .qbottom < width: 96%; height: 46vh; >.quodrant1, .quodrant2, .quodrant3, .quodrant4 < display: inline; float: left; width: 46%; height: 96%; border-radius: 30px; margin: 2%; >.quodrant1 < background-color: #948be5; >.quodrant2 < background-color: #22e235; >.quodrant3 < background-color: #086e75; >.quodrant4
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren’t very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
Title Bar NW
NE
SE
SW