Display: table Layout/Grid

Hi Guys,

Ok this is my design currently…

http://modocom.ca/miller/category/products/

Now how difficult would it be to change it using same way the tables to this…

http://modocom.ca/miller/newlayout.jpg

Most of it I know I can do but the thing that throws me off is the black navigation area since in previous layout which I had already coded everything had row. Is this layout change something rather simple to do Paul O’B please let me know what you think, you helped me out last time.

Thanks,

Mike

Hello,

Ok I got most of it solved but need some help with a few things. Not sure if it is the most efficient way to solve it but here it is…

http://modocom.ca/miller/versiontwo/

As you will see the red continues much to far down doesnt line up with the grey border on the right. Whats best way to solve this?

Also on Firefox you dont even see the red continue to the bottom of the website but do on Chrome and Safari not sure on IE but need that solved. OTherwise almost there.

Thanks,

Mike

Hi Mike,

That basically looks like a single column page and a much simpler design than your other page. I would start again with a new basic structure and port your content into the new structure.

The orange bar on the left could simply be a thick border on the wrapper; no need to do anything special for that.

The black nav could be floated in the main section and dragged out to the side. It does depend on the dynamic and what the page is supposed to look like and wide and small widths and whether that black nav has to stay attached to the left browser edge and also overlap the orange segment at all widths. You could probably do that by just using :after and absolutely placing a black stripe out to the left and off into the distance.

Very roughly like this (6 minutes work):


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%;
}
#outer {
	margin:0 100px;
	border-right:1px solid #ef3125;
	border-left:100px solid #ef3125;
	min-height:100%;
}
#header {
	min-height:150px;
	background:#fff;
	margin:0 -1px 0 -100px;
	padding:1px 0;
	position:relative;
	text-align:center;
}
.top {
	min-height:150px;
	background:#ccc;
	padding:1px 0;
}
.nav {
	width:300px;
	margin:0 0 0 -200px;
	min-height:200px;
	background:#000;
	color:#fff;
	float:left;
}
.content { margin-left:125px; }
.inner {
	width:100%;
	float:right;
}
</style>
</head>

<body>
<div id="outer">
		<div id="header">
				<h1>Miller</h1>
		</div>
		<div class="top">
				<p>Some more text</p>
		</div>
		<div class="nav">nav stuff</div>
		<div class="content">
				<div class="inner">
						<p>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum </p>
				</div>
		</div>
</div>
</body>
</html>


Hi Paul,

I just updated it and got the red bar to go even with the bottom now.

But still doesnt show on Firefox.

If I start over again dont I need to record majority of it to get the similar structure. Which unfortunately don’t have time right now as I’m presenting it to client this afternoon. I could however record afterwards I suppose but just need this working in firefox. Also in Future we may end up using those columns for stuff.

So if you could give me hand on how to get it towork in Firefox with red bar going all way down that would be great. I got set nav to absolute and it got rid of the long red bar so that part is done just need it to work correctly in Firefox.

You have the heights set to 200px and they should be 100%.


.table-mid .table-cell {
    height: 100%;
}

However, as I said above that structure is wasted on that layout as it can be so simple now. It will cause you problems later when you have to manage it because there are so many redundant elements now.

Thanks Paul,

I will begin to implement that over the weekend, but would you be able to help me with just getting other one working in firefox just so dont have to restyle a bunch lol

Ooops you already replied. Thanks, yes I’ll change it over to the simplier one over the weekend and just use this one for presentation.

The red in Firefox still doesnt seem to go to the bottom though.

Hi Paul,

So I deleted the old one and implemented the new one, the simplier solution which you provided…

http://modocom.ca/miller/versiontwo/

Much easier to work with only issue is that now the red bar and the grey border doesnt extend if the viewer is scrolling.

How can I resolve this?
Thanks,

Mike

Did you contain the floats :slight_smile:


#outer:after{
clear:both;
content:" ";
display:block;
height:0;
visibility:hidden;
}