Solved

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

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

Technology Partners: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Make footer stick to bottom 6 27
Fix Form size HTML 16 30
email validation 9 47
links not working 2 25
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

713 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