Solved

Layout images at the bottom of the page without messing up the rest of the page

Posted on 2013-06-05
4
383 Views
Last Modified: 2013-06-05
I am trying to layout the Additional images at the bottom of this page:
http://harbisondevelopment.info/ume-blossom
They are in a class called field-items, and so are the images above that and lines of text.
I think I have to do something like this:

field field-name-field-additional-images field-type-image field-items{
    float:left;
}
but that doesn't work. Ideally, I would like to have the images at the bottom show three in each row, instead of now, just a vertical column of images.
0
Comment
Question by:nanharbison
4 Comments
 
LVL 4

Assisted Solution

by:erik_nodland
erik_nodland earned 200 total points
ID: 39222610
Hi

You just need to widen your containing div so that they can flow freely.

.field.field-name-field-additional-images.field-type-image .field-items
{
    width:700px; float:left;
}

thanks
Erik
0
 
LVL 10

Assisted Solution

by:Ishaan Rawat
Ishaan Rawat earned 100 total points
ID: 39222736
Just add a width of 700px to the .field-items.

Float:left is already in use...
and dont forget to add..

<div style="clear:both"></div>

Open in new window


just after closing
.field-items

Open in new window

...
0
 
LVL 42

Accepted Solution

by:
David S. earned 200 total points
ID: 39222936
What Erik suggested would work, but only two classes for the selector and the width property are needed.
.field-name-field-additional-images .field-items {
  width: 890px;
}

Open in new window

@IshaanRawat  She's using "clearfix", so she doesn't need an ugly clearing div.
0
 
LVL 17

Author Closing Comment

by:nanharbison
ID: 39223663
Thanks everyone, I can't believe how long I struggled with this. I should have asked for help DAYS ago!
Nan
0

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question