SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

backgroud for floating columns within a div

5 years 1 week ago - 5 years 1 week ago #102306 by FireFly9
Is there a trick to having columns, which are set ups via css (.columnleft and .columnright for instance), to stay within the div (ie .content) that wraps them. My .content has a border and background, and I want the columns to nest within it.

Sometimes it works, sometimes it doesn't. I notice if I don't have columns the div that is inside of .content displays correctly and doesn't overshoot the bottom of the container (in this case called .content)

I'm choosing the floating columns rather than setting this up as display: table-cell, within a wrapper that is display: table. etc.

Is there something that needs to be in the css of the content div, or either of the columns to make them not over shoot the container (in this case called .content).

Please Log in to join the conversation.

5 years 1 week ago #102322 by Valentin
Replied by Valentin on topic backgroud for floating columns within a div
Hi FF9,

Do you have a working site with this example to check the preview of your progress? In that way we can provide a better advice

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 1 week ago - 5 years 1 week ago #102421 by FireFly9
Replied by FireFly9 on topic backgroud for floating columns within a div
I have two example pages posted to this site for you to look at.

(I am cleaning up ALL of my html sites, not only the CSS, but changing the original layout from tables to CSS, AND making all of them W3 compliant. Learned a lot lately.... :)

Anyway, on this site I have changed all the pages to my new layout except the original versions of these two pages because I can't get the columns to respond properly.

See: marcelin.ca/Council/council2.html (the original remaining page is marcelin.ca/Council/council.html )
and
marcelin.ca/index2.html (original version marcelin.ca/index.html )
The new layout for pages not in columns display fine: marcelin.ca/Services/residential.html

BUT!!
on this site it works fine - see both eagleridgeonkeg.ca/ and eagleridgeonkeg.ca/guidelines.html

Both sites have these pages nested within other divs (partially set up within the template.) The marcelin one is nested inside 2 divs, but I took one div out (from the template) and it didn't make any difference.

[When Rod makes up the new css video, can you pass along to him to really cover this. I know he has suggested in the recent html video to use 'display as table', but for those who use Dreamweaver this doesn't work well because the back end displays differently than the front end in this case. (That is one column drops below the other on the back end... and this is annoying from the WYSIWYG perspective, so it's better to use floats.) Many users need to know how to we get float columns to display correctly with regard to staying in their containers properly, AND how to make them have the same height as often one displays longer than the other.]

Please Log in to join the conversation.

5 years 1 week ago - 5 years 1 week ago #102428 by Valentin
Replied by Valentin on topic backgroud for floating columns within a div
Hi FF9,

See: marcelin.ca/Council/council2.html (the original remaining page is marcelin.ca/Council/council.html)

First remove the empty <p> tags you have next to .columnRightPages column.
Then add the display:table; property to .roundcorners2ndPages class, this will fill the height to match your inner columns.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 1 week ago - 5 years 1 week ago #102442 by FireFly9
Replied by FireFly9 on topic backgroud for floating columns within a div
Thank you Valentin - That worked for the council page. It took me a while though to figure out why I couldn't get the same thing to work for the other page template and page (index).

I didn't make that holding container (.roundcornersindex) display-table. But I do have a .clear (.clearboth) below it. Is that known to work as well in some cases?

The 2 pages with floating columns are now published live as:
marcelin.ca/Council/council.html
and
marcelin.ca/index.html

Also regarding W3 validation: What is this warning below I get a pass for all my pages except there is always one warning:

Info Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.

Please Log in to join the conversation.

5 years 1 week ago #102454 by Valentin
Replied by Valentin on topic backgroud for floating columns within a div

I didn't make that holding container (.roundcornersindex) display-table. But I do have a .clear (.clearboth) below it. Is that known to work as well in some cases?

That code works for other purpose. My suggestion is reproduce my previous suggestion pointing to the wrapper container that include your columns.

Info Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.

In which one of your sites?

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 1 week ago #102460 by FireFly9
Replied by FireFly9 on topic backgroud for floating columns within a div
Ha... all of them since I've started do the clean up process.
See the Marcelin site for instance. www.marcelin.ca
or www.tangledgardenherbs.ca

Please Log in to join the conversation.

5 years 6 days ago - 5 years 6 days ago #102531 by Valentin
Replied by Valentin on topic backgroud for floating columns within a div
Hi FF9,

I checked your sites from W3C site which is the most popular site to check HTML markup. I only got a single error that can be fixed:
validator.w3.org/check?uri=http%3A%2F%2F...ctype=Inline&group=0
validator.w3.org/check?uri=http%3A%2F%2F...or.w3.org%2Fservices

Looking forward to help you

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 6 days ago #102540 by FireFly9
Replied by FireFly9 on topic backgroud for floating columns within a div
Yes, thanks. I have been using this same checker for validation.

I left those errors because I didn't know how to fix them. They are both within embedded code - one from the 'weather network' as a weather button which is old and I think they are updating them, and another one from a YouTube video. This code is supplied to copy and paste so I just left them because I didn't understand what W3 was suggesting could be done.

I have used W3 to help me clean up 6 html sites so far. I have about 10-14 to go. (A winter project that requires taking out all the table structure from the layouts and applying CSS instead, and then checking it all with W3 :) but something I obviously should have done in the first place.)

Please Log in to join the conversation.

5 years 6 days ago - 5 years 6 days ago #102543 by FireFly9
Replied by FireFly9 on topic backgroud for floating columns within a div
Ha! I updated the weather button on the marcelin.ca site and now I get 23 errors. So I've made it worse. I changed the doc type to see if this made a difference but it didn't.
Can you help me fix this code??

It looks like this: Image attached (because the code wouldn't display correctly below)

<iframe marginheight="0" marginwidth="0" name="wxButtonFrame" id="wxButtonFrame" height="164" src=" btn.weather.ca/weatherbuttons/template2....ySearch=1&celsiusF=C " align="top" frameborder="0" width="100" scrolling="no" allowTransparency="true"></iframe>


validator.w3.org/check?uri=http%3A%2F%2F...ctype=Inline&group=0

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 6 days ago - 5 years 6 days ago #102585 by Valentin
Replied by Valentin on topic backgroud for floating columns within a div
Unfortunately that is the way many html widgets such as weather works, they not always follow the W3C validation.
Your site will work fine, nothing major to worry besides the validation due the way the widget is done is part of the functionality.

Let us know if we can help you in something else

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 10 months ago #104872 by FireFly9
Replied by FireFly9 on topic backgroud for floating columns within a div
Valentin - the conversation in this thread got a bit varied, but back to the original topic of
"backgroud for floating columns within a div"

Please see that I have not got it figured out yet. :)
This is another site that I manage:
see - www.eatonia.ca/
and: www.eatonia.ca/welcome.html - and all the rest of the pages on the site....

you can see on all the pages, the columns are not the same length but I DO have the containing div set to
'display as table'
and the columns within it set to display as table cells.

Can you assist me again on this as I just don't get it, especially if the containing div has a different color background.

Thanks

Please Log in to join the conversation.

4 years 10 months ago #104907 by Valentin
Replied by Valentin on topic backgroud for floating columns within a div
Hi FF9,

By lenght, do you mean the white columns height? see screenshot, please


If that is the case, set inline CSS to add a custom height value to match the larger one.
Example:
<div style="height: 600px;">
</div>

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

4 years 10 months ago - 4 years 10 months ago #104911 by FireFly9
Replied by FireFly9 on topic backgroud for floating columns within a div
Yes, the white columns is what I am referring to. Setting the column height doesn't really serve well since the content changes frequently. I could do that for the static pages though, except so many of those pages are based on the same template and thus the same css (ie columnleft, and column right, and the columns in each page are a different length because of the content. It would be counter productive to use a different css for each page.

I guess there's really not a fix for this issue - which is one of the drawback regarding using css columns over tables in the layout. Other than that you have to make the columns and the background the same color so the difference doesn't show.

Please Log in to join the conversation.

4 years 10 months ago - 4 years 10 months ago #104964 by Valentin
Replied by Valentin on topic backgroud for floating columns within a div
I understand what you mean. Using only CSS is not possible automatically generate the same height for all the columns by using the current html structure and float properties.

An alternative would be try flex , be aware this feature doesn't support old browsers.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!