1

I'm styling a text ad and want to change the positioning of some of the text, but I don't have access to the markup so I'm trying to accomplish it with just CSS.

Right now, it displays with an h2 on one line, an anchor tag on the next, and a paragraph below that:

ad title
          right-aligned ad link
ad text......................
.............................

Instead, I'd like it to display with the paragraph above the anchor:

ad title
ad text......................
.............................
left-aligned ad link

I created a jsfiddle with the markup and the current CSS. Also, it's worth mentioning that I am not supporting IE older than IE9.

Any help would be appreciated, thanks!

dagarre
  • 684
  • 1
  • 11
  • 29
  • possible duplicate of [Switching the order of block elements with CSS](http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css) – Dryden Long Feb 27 '14 at 19:17
  • It suggests using Flexbox which would be perfect, but it's not supported in IE9. – dagarre Feb 27 '14 at 19:33
  • possible duplicate of [What is the best way to move an element that's on the top to the bottom in Responsive design](http://stackoverflow.com/questions/17115995/what-is-the-best-way-to-move-an-element-thats-on-the-top-to-the-bottom-in-respo) – cimmanon Feb 27 '14 at 19:45
  • @cimmanon Not a duplicate as the solution uses Flexbox which isn't supported until IE10. – dagarre Feb 27 '14 at 20:51

2 Answers2

3

Sometimes you can solve this task with table-caption trick. Not everybody knows that table can have caption element which can also be moved to the bottom with caption-side property. So we can emulate it with display property:

.a-item {
    display: table;
}
.a-item .site {
    ...
    display:table-caption;
    caption-side: bottom;
}

Demo: http://jsfiddle.net/Uw8BG/5/

You could also go with Flexbox, but it will not work in IE until version IE10 (old syntax). However this trick will work in IE8+.

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • This looks like it might work out, testing it out now. This causes the ".a-item .site" element to display below the .a-item element, but I'm adjusting positioning with negative margins and think I'll get it working well. I'll accept this as a solution soon if this pans out. – dagarre Feb 27 '14 at 19:53
  • Likewise, you can use `display: table` on the container element and set its children to behave like table rows, headers or footers to reorder things. See http://tanalin.com/en/articles/css-block-order/ for an example. – Joel Spadin Feb 27 '14 at 19:54
-1

As @Dryden Long suggests you should take a look at this answer.

I have updated your fiddle with the proper CSS.

h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}
.a-item h2 a{
  float:none;
}
.a-item p a {
  float:none;
}
.a-item .site{
  text-align:left;  
  display:block;
  margin-bottom:10px;
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  box-ordinal-group: 3;
}
p {
  display: block;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  margin:10px 0 5px 0;
}
.a-item {    
  display: -webkit-box;
  display: -moz-box;
  display: box;

  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.a-item p {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}
Community
  • 1
  • 1
asp
  • 621
  • 8
  • 18
  • This is the older, deprecated flexbox syntax. [This Flexbox guide](http://css-tricks.com/snippets/css/a-guide-to-flexbox/) provides a good explanation of the newer syntax. (Basically, replace `display: box` with `display: flex`, `box-orient: vertical` with `flex-flow: column`, and `box-ordinal-group: #` with `order: #`.) – Joel Spadin Feb 27 '14 at 19:40
  • Please don't copy answers from other questions. If this question is a duplicate that already has an answer, this question should be closed as such. Also, this answer is quite outdated since Flexbox has changed significantly since it was posted. – cimmanon Feb 27 '14 at 19:42
  • @cimmanon my intention was not to copy the answer, just wanted to post the updated fiddle link, but it did not allow me to without code, sorry about that, I had attributed to the org answer – asp Feb 27 '14 at 19:46
  • I need to support IE9 though and from what I can find, it isn't supported until IE10. – dagarre Feb 27 '14 at 19:50