Changing column width different for top and bottom

rak

Hey guys,

I wanted to have the top colums split 40/40/20 and the bottom 50/50 (no center).

I am new to CSS, so please be patient.

I tried in custom.css the following (without success). The bottom works out fine, but the upper part the left and middle column are overlapping.

Any help is much appreciated. Thanks.

body {
	margin: 30px; /* Less margin */
 	height: calc(100% - 60px);
 	width: calc(100% - 60px);
}

header {
	text-transform: none; /* No Capitals in the Header */
}

.region.top.left {
	width: 37%;
}

.region.top.center {
	width: 37%;
	left: 0%;
	-moz-transform: translateX(0%);
	-o-transform: translateX(0%);
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}

.region.top.right {
	width: 13%;
}

.region.bottom.left {
	width: 47%;
}

.region.bottom.right {
	width: 47%;
}

justjim1220

@rak

Put something like this…

.region.top.left {
    width: 768px;
}

.region.top.center {
    width: 768px;
}

.region.top.right {
    width: 384px;
}

.region.bottom.left {
    width: 960px;
}

.region.bottom.right {
    width: 960px;
}

in your custom.css file. I would venture to think it should work, tested it out on my laptop, and it seemed to be what you might be wanting,

to get the number of pixels needed, I multiplied my screen resolution by .40 (40%) and .20 (20%). Then I divided my screen res width by 2 to get the 50% in pixels.

IE: my screen res for total width is 1920px. Thus 1920 X .40 = 768, giving me the top_left and top_center amounts.
then I multiplied 1920 X .20 to get the top_right amount. then to get the 2 bottom amounts, I divided 1920 /2 = 960.