Solved

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

Posted on 2013-06-05
4
388 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 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

729 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