Community Forums › Forums › Archived Forums › Design Tips and Tricks › Column class difficulties
Tagged: column class
- This topic has 5 replies, 3 voices, and was last updated 10 years, 1 month ago by WebMC.
-
AuthorPosts
-
June 4, 2013 at 6:21 pm #44089laurensdhaeseMember
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?
June 4, 2013 at 7:43 pm #44096rfmeierMemberHello,
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;
http://css-tricks.com/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.
June 4, 2013 at 8:54 pm #44104laurensdhaeseMemberThanks 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?
June 5, 2013 at 7:47 am #44138rfmeierMemberGlad 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.
June 5, 2013 at 7:39 pm #44256laurensdhaeseMemberThanks 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?
March 20, 2014 at 10:58 am #95836WebMCMemberthanks 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 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.