...

View Full Version : CSS Questions



Jamesuk
04-11-2011, 03:38 PM
Hi There

I have been using IP Board and IP Content to create a website, but this query is not directly related to that software. I have created a basic template using CSS, but have had non stop problems with fine tuning it.

Question 1: Does anyone have any suggestions as to how the sidebar on the left could be stretched to display it all the way down on that side using CSS?

Question 2: The padding of the hand "column" is all wrong (as you can see by the page source code), and I cannot get it into a position where there are simply two nice columns side by side, with separate content in each. Any ideas?

If anyone has any suggestions on how the code can be corrected then that would be very much appreciated.

Website: www.seafarersonline.com (http://www.seafarersonline.com)

Many thanks in advance.

teedoff
04-11-2011, 03:57 PM
1: try using a css trick called faux columns (http://www.alistapart.com/articles/fauxcolumns/)

2: Two column (http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm)layouts made easy.

You can add a margin-left to your content div. However, the image at the bottom is too large to fit in JUST the content div. The box model (http://www.w3.org/TR/CSS21/box.html)shows why.

Jamesuk
04-11-2011, 04:38 PM
Many thanks for that, teedoff.

I have added a margin-left attribute to the content div and that has been effective. Must admit that I'm not 100% sure how to edit the existing code to take into account the content on those two websites... I'll continue to fiddle around with it now and see...

Jamesuk
04-11-2011, 06:55 PM
Unfortunately I am still not having much luck with getting this to work with the existing code - not sure why!

I'm not sure if somebody out there could have a little look at the code?

Many thanks in advance. :)

Excavator
04-11-2011, 07:14 PM
Hello Jamesuk,



Question 1: Does anyone have any suggestions as to how the sidebar on the left could be stretched to display it all the way down on that side using CSS?

Try moving some background colors around, like this (changes highligted in red) -

#wrapper {
width: 70%;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #000000;
margin: 20px auto 8px auto;
background: #F3F7F9;
}

#header {
background: url( http://www.seafarersonline.com/forums/ccs_files/header_bg.png ) repeat-x;
border-bottom: 0px solid #192b40;
padding: 0px;
height: 99px;
}

#sidebar {
/*background: #F3F7F9;*/
width: 16%;
padding: 20px;
float: left;
overflow: hidden;
}

#content {
width: 84%;
padding: 30px 40px 30px 40px;
margin-left: 19%;
background: #fff;
}



Question 2: The padding of the hand "column" is all wrong (as you can see by the page source code), and I cannot get it into a position where there are simply two nice columns side by side, with separate content in each. Any ideas?

See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

You are mixing % widths with px padding. 16% column plus 84% content adds up to 100% width leaving no room for your padding.

Instead, try following this example of a simple 2 column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

Jamesuk
04-11-2011, 07:37 PM
Hi Excavator,

Very many thanks for your helpful response - managed to sort out the first issue with your suggestion.

I have had a look at those links and am trying to see if I can work out a way of arranging these two columns in a browser friendly way. I must admit that so far no joy has been had from any of my attempts, but will keep trying! If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.

Thank you again.

teedoff
04-11-2011, 07:58 PM
Hi Excavator,

Very many thanks for your helpful response - managed to sort out the first issue with your suggestion.

I have had a look at those links and am trying to see if I can work out a way of arranging these two columns in a browser friendly way. I must admit that so far no joy has been had from any of my attempts, but will keep trying! If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.

Thank you again.


If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.


Again, you have to use a faux column technique. The natural behavior of any div element is to expand based on the content within that div.

The one I gave you works great. I know Excavator has one on his site thats easy to implement and works great as well.

Jamesuk
04-11-2011, 08:06 PM
Hi teedoff,

Thanks again. My CSS skills are not great and have been playing round with this, with no luck all day! I tried creating an image and implementing it as the article mentioned, but just couldn't get it to display as expected.

Still having no joy now either! Oh well... will keep ploughing on.

teedoff
04-11-2011, 08:19 PM
Hi teedoff,

Thanks again. My CSS skills are not great and have been playing round with this, with no luck all day! I tried creating an image and implementing it as the article mentioned, but just couldn't get it to display as expected.

Still having no joy now either! Oh well... will keep ploughing on.

Looks to me like you have the sidebar extending all the way down. The padding you've put on it is causing it to jut out a bit when there is content inside it. You could remove that padding. Then you would have to do something different for the bit of text you have if you want it to have some margins.

Excavator
04-11-2011, 08:37 PM
If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.


Faux Columns is an image based solution. You don't need faux columns since you only have background colors. When you moved the background color of your left column over to #body doesn't that make the left column appear to be the same height as the content column?
Looking at your current version online this looks to be solved.
If not, could you restate the problem in more detail?

Excavator
04-11-2011, 08:41 PM
I have had a look at those links and am trying to see if I can work out a way of arranging these two columns in a browser friendly way. I must admit that so far no joy has been had from any of my attempts, but will keep trying!

Same story. I think your solution looks good now. I'm not a fan of % margin/padding but it's working for you.
I think all you may need is a min-width setting (http://www.w3schools.com/css/pr_dim_min-width.asp) to keep the statice width elements from breaking out of a % sized container that gets too small and some work on validating.

See the links about validation in my signature line below.

Jamesuk
04-11-2011, 08:42 PM
Hello again

Very many thanks again. That's really useful information... I've finally managed to put it together and think I've solved the problems. Just two quick queries...

1. The site is displaying fine in firefox and chrome, but there is a small blue bar appearing above the main content side in IE - any ideas?

2. I've resorted to using %'s to work out the size of the elements. Professionally speaking, is this a suitable way of working out distances, or would px's etc be more appropriate?

Excavator
04-11-2011, 08:46 PM
If in the meantime anyone has any suggestions as to what could be done to the code to produce two columns which are always of the same height (regardless of how much content is in each), that would be much appreciated.


Oops, I see what you might be referring too. On http://www.seafarersonline.com/about.php the #wrapper does not enclose everything because the floated #sidebar is taller than #content.

This is an entirely different issue, easy to fix but sometimes a hard concept to grasp.
If you make your CSS look like this you will see #wrapper can enclose both #sidebar and #content -
#wrapper {
width: 70%;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #000000;
margin: 10px auto 10px auto;
background: #F3F7F9;
overflow: auto;
}

See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

.

Jamesuk
04-11-2011, 09:08 PM
Excellent, thank you - I think some of our posts might have overlapped! I have made your final tweaks and sorted out a few other bits and think it's pretty much so there. Thanks. :)

My only query is whether there is a fix for making the right hand column look as though it is the same length as the left. See this example where it is not working: http://www.seafarersonline.com/deckofficers.php

Thanks

Excavator
04-11-2011, 09:46 PM
My only query is whether there is a fix for making the right hand column look as though it is the same length as the left. See this example where it is not working: http://www.seafarersonline.com/deckofficers.php



When there is less content in the right column than there is in the left ... there's not much this layout can do about that. This layout works well when the left column is the shorter one but that's it.

There is a method that will work and it's only a little more complicated. Have a look at a demo I've made here (http://nopeople.com/CSS%20tips/fluid_width/index.html).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum