0

I'm still fairly new to CSS and HTML, so I need a little help. I'm making a theme for my tumblr blog and I have three main divs that I'd like to be aligned side by side in the same row, as well as centered.

It should look something like this (edited with Photoshop): enter image description here

Right now it looks like this: enter image description here

I've looked everywhere for answers, and I've tried multiple things. Almost every tutorial or piece of advice includes the float:left; thing, but that didn't work. Is there something wrong with the code I already have? What is it that I need to change or add? I'd like the image to be in the center, the description to be on the left and the links to be on the right.

Here are the codes:

#top {
margin-left:-35px;
margin-top:30px;
}

#topimage {
width:64px;
height:64px;
border-radius:3px;
border:6px solid #fff;
background-image:url('{PortraitURL-64}');
}

#topdeschold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
}

#topdesc {
text-align:justify;
font-size:7px;
text-transform:uppercase;
}

#topdesctitle {
color:#df8d88;
font-size:9px;
text-transform:lowercase;
font-style:italic;
text-align:right;
}

#toplinkshold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
}

#toplinks {
display:block;
padding:6px;
background-color:#f8f8f8;
font-size:7px;
text-transform:uppercase;
}


<div id="top">

<div id="topimage"></div>

<div id="topdeschold">
 <div id="topdesctitle">blah blah balh</div>
 <div id="topdesc"> Blah! Blah blah balh? lbalhlalg? dlff 
 df gb fgbgn fgnghnghn gnhgn fhng! DGSsdf gf</div>
</div>

<div id="toplinkshold">
 <div id="toplinks">
  <a href="/">home</a>
 </div>

 <div id="toplinks">
  <a href="/">ask</a>
 </div>

 <div id="toplinks">
  <a href="/">submit</a>
 </div>

 <div id="toplinks">
  <a href="/">more</a>
 </div>
</div>

</div>

Your help is appreciated!

mikedidthis
  • 4,899
  • 3
  • 28
  • 43
user3576630
  • 1
  • You need to use [floats](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504) – Mr. Alien Apr 26 '14 at 18:40

4 Answers4

2

If ancient browser support is not an issue, use css3 Flex. Apply the following css for the parent element

#top {
    display:flex;
    justify-content:space-around;
}

or you can make the child divs inline-block elements, center it using text-align and adjust the space using 'margin`, something like

#top {
    text-align:center;
}
#top > div {
    display:inline-block;
    margin: 1em; /* or your desired margin */
}
Rúnar Berg
  • 4,229
  • 1
  • 22
  • 38
T J
  • 42,762
  • 13
  • 83
  • 138
  • We have something called floats – Mr. Alien Apr 26 '14 at 18:39
  • Yes.. also clearfix, overflow.. etc. As far as i know, `float` was "meant" to float text... but was mostly used for layouts. now we have something called `flex` which is meant for layouts... :) – T J Apr 26 '14 at 18:42
  • This is the best example so far. I tried the second one, and here's what came out: http://i.imgur.com/4yS8jeG.png It's not exactly what I want, but it's getting there. The margin is set to 0 here. I'm going to play around with it to see what I can do. Thanks for your help! – user3576630 Apr 26 '14 at 19:52
  • @user3576630 instead of the image, can you share a [JSFiddle](http://jsfiddle.net) then it'll be easy to fix... – T J Apr 27 '14 at 02:20
0

I think you could group the three divs inside another one, set its display css property to block and then center this last one. You should also set the display property to inline-block on the three original divs.

Good luck!

Abel Mayorga
  • 21
  • 3
  • I tried this and here's what happened: http://i.imgur.com/QG17u35.png I have no idea what's wrong. I'm thinking maybe another part of my code is doing something, but the only other thing is the container, which I've played around with and it didn't do anything. I'm going to keep trying though. – user3576630 Apr 26 '14 at 19:42
0

Another way to do it is add "float:left;" to each of the div styles which are acting as the containers for the data you want to view side by side. For example;

#topimage {
width:64px;
height:64px;
border-radius:3px;
border:6px solid #fff;
background-image:url('{PortraitURL-64}');
float:left;
}
#topdeschold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}
#toplinkshold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}

So your CSS would be:

#topimage {
width:64px;
height:64px;
border-radius:3px;
border:6px solid #fff;
background-image:url('{PortraitURL-64}');
float:left;
}
#topdeschold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}
#toplinkshold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}
#top {
margin-left:-35px;
margin-top:30px;
}
#topdesc {
text-align:justify;
font-size:7px;
text-transform:uppercase;
}
#topdesctitle {
color:#df8d88;
font-size:9px;
text-transform:lowercase;
font-style:italic;
text-align:right;
}
#toplinks {
display:block;
padding:6px;
background-color:#f8f8f8;
font-size:7px;
text-transform:uppercase;
}

Made a JSFiddle with this in action: http://jsfiddle.net/vjZqC/

MysMelody
  • 33
  • 4
  • This example seemed more promising, but it ended up doing this: http://i.imgur.com/Vtc0mva.png It seems to have squished my first post in with it. I'm not sure what the problem is. – user3576630 Apr 26 '14 at 19:34
  • It is because there are no real defined sizes across the containers, ideally you'd want them to be width:33%; so that they'll take up 1/3rd each (unless where you're putting them is a defined pixel size, then turn that into thirds). You'll need a vertical-align: middle; and margin:auto; for a center effect. All things will automatically try to go to the top left hand side, unless having stringent placements in place :) – MysMelody Apr 26 '14 at 20:00
0

Here is the css you have to add to yours. I've tried it and it works:



    #top {
    display:block;
    text-align:center;
    }

    #topimage {
    display:inline-block;
    }

    #topdeschold {
    display:inline-block;
    }

    #toplinkshold {
    display:inline-block;
    }
Abel Mayorga
  • 21
  • 3