Photoshop Question posted in
The official user guide can be found here.

How do you put three divs side by side and then center them? – Photoshop

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!

Tags:

4

Answers


  1. 0

    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 */
}
    Login or Signup to reply.
  2. 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!

    Login or Signup to reply.
  3. 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/

    Login or Signup to reply.
  4. 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;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search