Need help setting up Columns correctly Please

[LaunchPad777]

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

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[LaunchPad777]

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

[LaunchPad777]

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...

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[LaunchPad777]

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

[LaunchPad777]

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

[nutsandbolts]

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

---

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

[LaunchPad777]

<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>

[LaunchPad777]

`<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>

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[LaunchPad777]

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

[LaunchPad777]

Hi Andrea,

You gone AWOL on me.....lol

Regards

Greg

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[LaunchPad777]

Hey Andrea,

Thanks for your help....it's sorted now...

Regards

Greg

[Author]

Posts