mk12 0

I'm just a hobbyist, and anyway, I've been trying for a while now and can't get it right. I want to have a 2 column layout, the navigation bar on the left. The navigation bar will have a fixed width, but in the main content section will be fluid. And all content will always be centred. So resizing the window (enlarging) at first will just make the fluid main content expand, until it gets to its maximum width, and all the content will move along to stay centred. Or maybe resizing should only half expand the fluid content (until max width), and half do nothing, so it will get centred (and there will be equal-sized empty space on both left and right). Sorry, I can't really describe it well but hopefully you get what I mean. So, any hints as to how I should approach doing this (through CSS) ? Thanks.

2 answers

3
points
This was chosen as the best answer

I looked at the mk12.gotdns.com page. To make it fluid all you need to do is change the div#content css selector to look like this:

div#content {
  margin-left:auto;
  margin-right:auto;
  max-width:80%;
  width:auto;
}

Of course, you can change the 80% to be whatever you need it to be, either a different percentage or a set pixel size. Also, I like the look of the site and the code is very clean.

Answered almost 8 years ago by Abinadi Ayerdis
  • Thanks! Exactly what I was looking for. And I customize the max-width and min-width. Thanks! mk12 almost 8 years ago
  • But now for the content part I can't change the height.. min-height and height in css have no effect.. any idea why? mk12 almost 8 years ago
  • Sorry stupid me confusing content with main. mk12 almost 8 years ago
  • I played around with it a bit, mind looking at it? The file directory is mk12.gotdns.com/(index.html-homepages.css-script.js). mk12 almost 8 years ago
1
point

You could probably find what you're looking for here:

http://layouts.ironmyers.com/

What you're describing is quite common.

if there's nothing there, pick the closest and we can have a look at what it needs to get exactly where you want to be.

Answered almost 8 years ago by Tony Crockford
  • Thanks, I figured out what I was mainly looking for, positioning the main div relative to the navigation bar: using the 'em' unit. mk12 almost 8 years ago
  • But now, how can I make the main part contract when resized too small to view everything? mk12 almost 8 years ago
  • Check it out at mk12.gotdns.com. I put some dummy text in. Is the layout good? Should I bother trying to make it also fluid? mk12 almost 8 years ago
  • And you can see the .css at mk12.gotdns.com/homepage.css. mk12 almost 8 years ago