CODEWITHSUNDEEP
phpcssxhtml
user656925
user656925

Reputation:

How do I make elements flow horizontally instead of vertically?

I have a link after an image in my xhtml. The browser automatically puts a return character after the image so that the link is below the image. I want the link to be beside the image. How do I modify the CSS/XHTML for this?

PHP generates it like this(example code)

  echo "<img class = \"c\" src=\"http:\/\/www.facebook.com\/favicon.ico\" alt=\"\"\/>";
  echo "<a name = \"a1\" class = \"b\" href = \"$ass_array[url]\">$ass_array[name]</a>";

CSS

img.c
  {
  display:??;
  }

a.b
  {
  color:#000088;
  padding-top:2px;
  padding-bottom:2px; 
  display:block;
  width:100%;
  border-bottom:1px solid #cccccc;
  }

Upvotes: 1

Views: 980

Answers (3)

thirtydot
thirtydot

Reputation: 228182

See: http://jsfiddle.net/thirtydot/vgnAa/

CSS:

.c {
    display: block;
    float: left;
    margin-top: 4px;
    margin-right: 4px;
}
.b {
    color:#000088;
    padding-top:2px;
    padding-bottom:2px; 
    display:block;
    border-bottom:1px solid #cccccc;
    overflow: hidden;
}

Upvotes: 1

Horacio Nu&#241;ez
Horacio Nu&#241;ez

Reputation: 231

"float:left;" for both elements will work

Upvotes: 0

rikkit
rikkit

Reputation: 1137

Either float: left, float: right depending which side you want the link to be. Apply that to both, and make sure to have a clear div after.

This way you can still have that display:block on .b.

Upvotes: 0

Related Questions