Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-06-05
4
Medium Priority
?
394 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 4

Assisted Solution

by:erik_nodland
erik_nodland earned 800 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 400 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 43

Accepted Solution

by:
David S. earned 800 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

610 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