0

I've been playing around with divs and classes to try and get the text on my website to line up well. Currently I have 2 classes, which I want to align next to each other to make 2 columns. Ill add the code but basically, the right hand column, the text column, wont align well on mobile devices. I want this column to have possibly multiple rows of text, which vertically centres to the middle of the row, Currently Im using padding, but thats not coming out ideal.

Also, I have to have some text below my content Div, otherwise my footer will creep up, this also is annoying... I've been trying a bunch of different div and class settings but I haven't found the right settings yet

the html and css are here: http://hascomp.net/

the problem areas are:

HTML

<div id="content"> 

  <p class="contentleftcol" >
  <img src="frontend/laptop-computer_repairs.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  Windows OS computer repairs and tune ups: remove not needed software slowing the computer down
  </p>

  <p class="contentleftcol" >
  <img src="frontend/wifi.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  wifi configuration and optimisation
  </p>

  <p class="contentleftcol" >
  <img src="frontend/anti_spyware.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  virus and spyware removal
  </p>

  <p class="contentleftcol" >
  <img src="frontend/computer_upgrades.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  computer upgrades
  </p>
  </div>

CSS

#content{
    padding:0 0 24px 24px;
}
.contentleftcol{
    float:left;
    width:150px;
    padding-left:50px;
    height:150px;



}
.contentrightcol{
    float:right;
    width:760px;
    padding-top:68px;
    padding-bottom:70px;
}

thanks!

user2905606
  • 41
  • 4

2 Answers2

0

The way to vertically align text can be done in multiple ways though the most effective is this one:

On the parent add:

display: table;

Then on the text that you want to center add:

display: table-cell;
vertical-align: middle;

OR

On the parent add:

position: relative;

Then on the text that you want to center add:

position: absolute;
top: 50%;
margin-top: -(width/2)
Hive7
  • 3,277
  • 2
  • 18
  • 37
  • thanks, I've tried this, but havent had much luck with either... for the table option it seems you need to use the line-height: 309px; option, but I want to use multiple lines..., so I think I;ll just have to use padding-top. For the second option, I think this only works for divs, and I'm using classes so I can have multiples... – user2905606 Oct 26 '13 at 06:35
0

Firstly I'd recommend you to wrap image and text (contentleftcol and contentrightcol) into one div, div.row (for example). Then, add some clearfix to it to prevent height issues. This also can help you in further developing for small screens. 

    .row:after{
      content: "";
      display: table;
      clear: both; 
    }

After it you can implement all what Hive7 told or read more about it:

Community
  • 1
  • 1
Mihey Egoroff
  • 1,519
  • 14
  • 19