?
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
?
392 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 42

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

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
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 invoke it on a web page. 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.: (CODE)
Suggested Courses

762 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