Column class difficulties

[laurensdhaese]

Hello,

I'm new to Sitebuilding, HTML and CSS. Luckily genesis works fairly easy. However, I have one problems so far I can't figure out.

On this page I tried to create 3 column classes and I put tables in there to keep the content together. After the </div> tag from the column class the text continues to stay in the third column. example, see: ...... Like the plank exercise ....   Under Heading: Bridge (4)

Under Heading Plank (3) I tried to solve this to create a new row with 3 tables and I put the text (Start by trying to maintain the position in...) in between, resulting in the same problem.

Question: How can I after the three columns continue to write underneath the columns?

 

If someone could help out, that would be great.

 

And I just published the post and the tables in chrome are next to each other, while in safari they are underneath each other?  Anyone knows how to solve that?

[rfmeier]

Hello,

The issue with elements that float: left or float: right is how wierd they act. Elements after will attempt to fill up that space which creates an odd display.

If the element after the floating elements has a clear: both property it will fix the problem most of the time. So, if you add a clearing attribute to the following

element, it should fix the issue.

<p style="clear: both;">This is some test text.  It will clear floats before and after it.</p>

Here is some additional reference;

The How and Why of Clearing Floats

http://www.quirksmode.org/css/clearing.html

It's best to learn this sooner than later, it will help you in the long run.

I hope this helps.

---

Ryan Meier – Twitter

[laurensdhaese]

Thanks allot!  That solves the problem.

I added: <div style="clear: both;"></div>   after the last column, solving the issue.

 

Then I have another question. I put the images in tables so I could put a tekst on top and underneath in a different row. Although this seems to work full-screen. The tables re-arrange under each other as soon as I resize my window resulting in a text to wide  and picture to small table.

 

Is there another way to do this?

 

 

[rfmeier]

Glad I could help. For the second question look at your style.css around line ~1769. The media query adjust the widths of the 'columns' when the screen hits a certain size.

The initial styling for the .one-third column is at ~652, then ~678. Once the screen is re-sized, the styling at line ~1769 becomes the dominate style since the screen is within the media query range on line ~1733.

You will have to determine how you want to column to display when the screen is re-sized; either full width, or do nothing.

I hope I helped explain this.

Let me know if you have any questions.

---

Ryan Meier – Twitter

[laurensdhaese]

Thanks again Ryan,

Think I solved the problem by changing the width: 100%  value to width: 251px (the width of the one-third columns) Seems to work, Is this risk-free?

However a new question pops-up now:

When I resize the screen now, the table dropping a row below can get 'stuck' behind the first column-table if the total height of the first column = higher than the second.  (hope this makes sense).

The third column does not align to the left.

 

Any Ideas how to fix this?

 

 

[WebMC]

thanks for this advice re clearing I seem to get the same thing happening occasionally and can never remember how to fix it.... now favourited so I can find it more easily!

Thanks again 🙂

[Author]

Posts