Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS vertically align text in left floated divs

Posted on 2011-04-23
5
Medium Priority
?
360 Views
Last Modified: 2012-05-11
I'd like to float 2 divs to the left of a parent div and have the text in the left div vertically aligned with respect to the parent div.
In plain HTML tables, this is easy (see below):

<table>
 <tr>
  <td rowspan="3" valign="middle">Sony ABC1234</td>
  <td>power supply</td>
 </tr>
 <tr>
   <td>remote control</td>
 </tr>
 <tr>
   <td>user manual</td>
 </tr>
</table>

Open in new window


I don't want to use tables, as the number of rows for rowspan is going to be variable and complex to work out.  I'd prefer to use DIVs and CSS.
For the following DIV layout, how can I achieve the same effect as the table?
The outer div is not in any fixed position on the page, nor does it have a fixed height.

 
<div id="model">
 <div id="modelname">Sony ABC1234</div>
 <div id="modelparts">
  <div class="part">power supply</div>
  <div class="part">remote control</div>
  <div class="part">user manual</div>
 </div>
<div class="clearfloat"></div>
</div>

Open in new window



After hours of experimenting with vertical-aligns, TOP or margin:autos and Googling, I am just going round in circles - help !
0
Comment
Question by:Beamson
  • 3
  • 2
5 Comments
 
LVL 7

Expert Comment

by:DanielleFavreau
ID: 35453764
If you're showing tabular data, is there a particular reason why you don't want to use a table?  A table is a fully acceptable method of displaying tabular data.  Divs aren't always the way to go.

If you must use divs then your outer div will need a height and should have a relative position, then you'll give your inner left div (modelname) a reference of top: 38-50% (by that I mean a value between 38% and 50% depending what works best with your font sizes) and a position of absolute.

See the code below.
<style type="text/css">
#model { width: 500px; position: relative; height: 50px; }
#model .modelname { position: absolute; float: left; width: 200px; vertical-align: middle; top: 38%; }
#model .modelparts { float: right; width: 300px; display: table-cell; }
.clearfloat { clear: both; }
</style>

<div id="model">
 <div class="modelname">Sony ABC1234</div><!-- model name -->
 <div class="modelparts">
  <div class="part">power supply</div>
  <div class="part">remote control</div>
  <div class="part">user manual</div>
 </div><!-- model parts -->
<div class="clearfloat"></div>
</div>

Open in new window

0
 
LVL 1

Author Comment

by:Beamson
ID: 35453946
Technically, yes, I could do what I want to with a table.  To do so would vastly complicate my ASP code behind (calculating the rowspan values from a SQL database, for one thing).  From a maintenance point of view it would leave my nice, neat server side code in something of a mess.

My problem is that the number of repeated rows is an unknown, therefore the height of the container div will vary depending on what set of results the user selects.

The ideal solution would be to use the "table-layout" CSS but this wouldn't work on too many potential user's browsers still using IE7 or earlier.

Just taking a few steps back from what I'm trying to achieve, is there any way of:
1) forcing a floated div to expand vertically to fill a container div and
2) vertically centering text within a div of unknown height?
0
 
LVL 7

Accepted Solution

by:
DanielleFavreau earned 750 total points
ID: 35453974
1) Yes, you can force that, read more here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

2) Generally not, you need to know the height of either the div or the parent div.  You can do it with javascript, but that may cause more complications.

Note: for usability sake, users naturally prefer text to show up at the top and go down from there, rather than be vertically center aligned.  They are used to going all the way down column 1 before going back to the top of column 2 to start again.  So though it may be okay for 1-3 rows, beyond that it may make your user's experience more difficult.
0
 
LVL 1

Author Closing Comment

by:Beamson
ID: 35456932
In the end, your wisdom on "users prefer text at the top" prevailed.

I've greaded this "B" as It does not solve the problem of how to achieve the required result.  Instead, it has simply changed my mind on whether its worth trying at all.

Thanks Danielle.
0
 
LVL 7

Expert Comment

by:DanielleFavreau
ID: 35472755
You're welcome. Though not the solution you were looking for, at least you know how to do it in the future (the link I provided has full instructions) and when it is and isn't appropriate to do so.  I learned the hard way with negative user feedback so I don't vertically align cell content any more.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question