• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 162
  • Last Modified:

Section Layout not working right.

So I have a section that I added into this page http://tinyurl.com/3nm46ok, its supposed to align underneath the top section, similar to how they are laid out on this page http://tinyurl.com/3e8fdf2.  But as you can see it seems to wrap.  What am I doing wrong?
0
iceman19330
Asked:
iceman19330
  • 4
  • 3
1 Solution
 
jonahzonaCommented:
Your markup between the two pages is very different. Completely different classes are being used.

The first thing I see is that your <div class="line"></div> seems to be in the wrong place. It should be between the product-content and the ai-second-product divs.

Here is a screenshot of this with the line between the two products. What else needs to change?

 Screenshot
0
 
iceman19330Author Commented:
Basically the stuff below the line need to go horizontal vs vertical like it is now.
example
Please note the example is FPO.
0
 
jonahzonaCommented:
Well, this looks like you need to change a number of things.

The first thing I would do is move all of the info content (h3, divs with smaller text) into one larger div that has width and height attributes defined and is given a float: left; attribute.

Along with that I would give that ul a class so that you could further define the <li> elements and get the spacing that you want.

Then I would place the images in another containing div that would be also given a float: left; and sit next to the div that contains all the detailed info.

I would code it out, but there is so much markup to change it is difficult to do in Firebug....
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
iceman19330Author Commented:
I still cant get the image to come back up next to the text.  Any thoughts?
http://tinyurl.com/3nm46ok
0
 
jonahzonaCommented:
Alright, you are so close!

Change your markup slightly by moving where the ai-item-info div starts. Here is the markup

<div class="ai-item-content">
           <div class="ai-item-info">
            <h3>Chair Cover</h3>
                        <div class="red-price">Irregular Price: $212</div>
            <!--/irreg-price-->
                                    <div class="small-price">Standard Price: $235</div>
            <!--/standard-price-->

                <ul>
					                    <li><strong>Serial Number</strong>: 12346</li>
										                    <li><strong>Dimensions</strong>: 12"x24"</li>
										                    <li><strong>Wood</strong>: Cherry</li>
										                    <li><strong>Finish</strong>: Clear</li>
										                    <li><strong>Upholstery</strong>: Velvet </li>
														</ul>
            <!--/item-info-->
        </div>
        <!--/item-content-->
                <div class="ai-item-images">
            <div class="ai-add_box_inner">
                <div class="ai-add_pic"><a href="/node/33"> <img alt="" src="/"></a></div>
                <div class="ai-add_icon">
                    <ul>
                                                <li><a title="" alt="/sites/default/files/discontinued_product_0.jpg" class="preview" href="/node/33"> <img height="51" width="68" src="/sites/default/files/discontinued_product_0.jpg"></a></li>
						                    </ul>
                </div>
                <!--/add_icon--> 
            </div>
            <!--/add_box_inner--> 
        </div>
        <!--/item-images-->
            </div>

Open in new window


Also, change your CSS slightly

.ai-item-content {
    float: left;
    padding-left: 20px;
    width: 100%;
}

Open in new window


.ai-item-info {
    float: left;
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 380px;
}

Open in new window


This should give the results you want. You may have to change some margins/padding to space vertically, but it looks good. See screenshot.

 Screenshot
0
 
jonahzonaCommented:
Looks like you got it working. Any issues with the fix?
0
 
iceman19330Author Commented:
Looks good.
thanks
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now