Need help setting up Columns correctly Please

Community Forums Forums Design Tips and Tricks Need help setting up Columns correctly Please

This topic is: resolved

This topic contains 14 replies, has 2 voices, and was last updated by  LaunchPad777 7 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #91664

    LaunchPad777
    Member
    Post count: 98

    Hello all,

    Busy building test site for client….using Parallax Pro

    Trying to get columns set up correctly to display content in the required format in one a text widget in one of the Home-Section widgets.
    The first column contains an image. The second column contains an image and some content below the image.
    See the screenshot….. http://screencast.com/t/z4FRX66PYJ

    Found the code for setting up the columns as follows:
    (http://stackoverflow.com/questions/5645986/two-column-layout-using-divs)

    <div id=”column1-wrap”>
    <div id=”column1″>Column 1</div>
    </div>
    <div id=”column2″>Column 2</div>
    <div id=”clear”></div>

    The CSS I used is:
    #column1-wrap {
    float: left;
    width: 100%;
    }
    #column1{
    background-color: #FFFFFF;
    margin-right: 200px;
    }
    #column2{
    background-color: #FFFFFF;
    float: left;
    width: 550px;
    margin-left: -200px;
    }
    #clear{
    clear: both;
    }

    But as you can see, I just cannot get the second image to move up on the right, and can’t get the content to move with it.
    Have spent ages trying all sorts of changes so very frustrated right now.

    Not sure what needs to be added or changed?

    Desperately need your input…
    Regards
    Greg

    http://www.test.gregcooksley.com
    #91756

    nutsandbolts
    Moderator
    Post count: 3139

    You might try using the column classes built into Genesis since your child theme already has the CSS in place for them: http://my.studiopress.com/tutorials/content-column-classes/


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #91761

    LaunchPad777
    Member
    Post count: 98

    Hi Andrea,

    I did look at that and tried Custom Classes but for some reason it didn’t work…..I’m not sure if it’s because of the parallax theme…
    At the time, I thought it didn’t work because I was trying to use it in a Widget….
    Will it work inside of a widget?

    If it does work inside of a widget, how do you target specific column sizes – say 200px and 550px (for 2 column setup)?

    Regards

    Greg

    #91801

    LaunchPad777
    Member
    Post count: 98

    Hi Andrea,

    Okay played around with the columns and it seems to be working now…..
    Used the two column option, split one-fourth and three fourths….

    Well at least I’m getting the two images up alongside each other….and the content is there too…
    Just can’t seem to be able to correctly format the content…

    What I need is for the text to be justified…

    #91802

    nutsandbolts
    Moderator
    Post count: 3139

    Is this on the homepage of the Planet Wash site? I’m not seeing the widget with the columns unless I’m totally losing my mind (which is very possible).


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #91804

    LaunchPad777
    Member
    Post count: 98

    Hey Andrea,

    Yes just scroll down a bit….under words “3 Images”….

    It’s almost 1am here so I lost mine about 4 hours ago….lol

    #91805

    LaunchPad777
    Member
    Post count: 98

    Andrea,
    If you look at the screenshot again….you will see what I’m trying to implement…

    The text is all nicely justified and sits neatly under the 2nd image….

    Any advice..

    Regards
    Greg

    #91806

    nutsandbolts
    Moderator
    Post count: 3139

    Can you paste in the HTML that’s currently in the text widget?


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #91894

    LaunchPad777
    Member
    Post count: 98

    <div class=”one-fourth first”></div>
    <div class=”three-fourths”></div>
    <div>Planet Wash keeps finding ways to make the world a cleaner place. By using highly innovative nano and colloidal technology in our Window Cleaner, we’ve created a product that ensures far less repeated window cleaning. Natural plant and vegetable oils are blended to create particles so small they can penetrate dirt easily and quickly. With the combination of colloidal processes, a thin hydrophobic film is formed and dirt is repelled, keeping windows cleaner for much longer. Hydrocarbon molecules align with each other and bond with the glass to form a strong film. Dirt is encapsulated and suspended until it is returned safely to the environment and naturally bio-degraded. Yet another cleaner, greener, smarter product from the Planet Wash family.</div></div>

    #91898

    LaunchPad777
    Member
    Post count: 98

    `<div class=”one-fourth first”><img alt=”” src=”http://www.test.gregcooksley.com/wp-content/uploads/2014/02/GLASS-CLEANER-385h.jpg” width=”185″ height=”385″ /></div>
    <div class=”three-fourths”><img alt=”” src=”http://www.test.gregcooksley.com/wp-content/uploads/2014/02/Product-panel-window-cleaner-510.jpg” width=”510″ height=”124″ ></div>
    <div>Planet Wash keeps finding ways to make the world a cleaner place. By using highly innovative nano and colloidal technology in our Window Cleaner, we’ve created a product that ensures far less repeated window cleaning. Natural plant and vegetable oils are blended to create particles so small they can penetrate dirt easily and quickly. With the combination of colloidal processes, a thin hydrophobic film is formed and dirt is repelled, keeping windows cleaner for much longer. Hydrocarbon molecules align with each other and bond with the glass to form a strong film. Dirt is encapsulated and suspended until it is returned safely to the environment and naturally bio-degraded. Yet another cleaner, greener, smarter product from the Planet Wash family.</div></div>

    #91934

    nutsandbolts
    Moderator
    Post count: 3139

    Okay, try this and see if it helps (basically just changing the div tags around the paragraph to paragraph tags):

    <div class=”one-fourth first”><img alt=”" src=”http://www.test.gregcooksley.com/wp-content/uploads/2014/02/GLASS-CLEANER-385h.jpg” width=”185″ height=”385″ /></div>
    <div class=”three-fourths”><img alt=”" src=”http://www.test.gregcooksley.com/wp-content/uploads/2014/02/Product-panel-window-cleaner-510.jpg” width=”510″ height=”124″ >
    <p>Planet Wash keeps finding ways to make the world a cleaner place. By using highly innovative nano and colloidal technology in our Window Cleaner, we’ve created a product that ensures far less repeated window cleaning. Natural plant and vegetable oils are blended to create particles so small they can penetrate dirt easily and quickly. With the combination of colloidal processes, a thin hydrophobic film is formed and dirt is repelled, keeping windows cleaner for much longer. Hydrocarbon molecules align with each other and bond with the glass to form a strong film. Dirt is encapsulated and suspended until it is returned safely to the environment and naturally bio-degraded. Yet another cleaner, greener, smarter product from the Planet Wash family.</p></div>

    That should force the text to clear instead of trying to display up against the image. If your text is still centered, let me know and I’ll take a look at it again.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #91940

    LaunchPad777
    Member
    Post count: 98

    Hey Andrea,

    Thanks – yes that aligns the text a bit better….
    What would need to be changed to square up the block of text the way it is in the screenshot?

    http://screencast.com/t/z4FRX66PYJ

    So that the edges of the text are in line with the edges of the image above it and justified?

    Regards
    Greg

    #92297

    LaunchPad777
    Member
    Post count: 98

    Hi Andrea,

    You gone AWOL on me…..lol

    Regards

    Greg

    #92351

    nutsandbolts
    Moderator
    Post count: 3139

    Sorry! Lost your reply in the abyss of my inbox. Try changing the opening <p> tag to <p style=”text-align:justify”> and see if that works.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #93078

    LaunchPad777
    Member
    Post count: 98

    Hey Andrea,

    Thanks for your help….it’s sorted now…

    Regards

    Greg

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Need help setting up Columns correctly Please’ is closed to new replies.