CODEWITHSUNDEEP
htmlcss
Munch
Munch

Reputation: 779

CSS Text Alignment with Menu

So I'm trying to align some text to the right of my vertical menu. As I included the entire code for this page, below is a link to it:

Website Code

Here is an image of what I'm trying to achieve. I have tried 

display: inline-block;

and

display: inline;

enter image description here

So just as a recap lol, I want the text 'Changelog Ver: 0.1' to appear to the right of the vertical menu on the left.

Thanks.

Upvotes: 0

Views: 72

Answers (3)

toastrackengima
toastrackengima

Reputation: 8752

Methods

You could use one of the following methods:

  • float:left; on .menu
  • display:inline-block; + vertical-align:top; on .menu
  • position:absolute; on #changetitle

With the float and vertical-align methods, you'll need to remove the margin-right on .menu ul (float will also work if you give the menu a width). With position:absolute you're goning to spend a whole lot of time getting the left and top values right :P

Which is best?

Probably inline-block. It's the easiest to set up, and just works. Best of all, it's dynamic. If you want to add another menu item at a later date and have to make the .menu div bigger, you don't have to change the CSS, whereas float usually would require you to set a width on .menu and position:absolute definitely requires that (as it is telling the browser exactly at what pixel to put #changetitle. If you're going to have more columns continue this design throughout the rest of the page, you may want to consider using column or display:table (never an actual <table> :P)

Long story short, use inline-block.

Here's a working demo: https://jsfiddle.net/mnfgo32g/12/

Upvotes: 0

Ting Sun
Ting Sun

Reputation: 316

For display:inline-block to work the way you want it to work your .menu also needs to be display:inline-block. You may also want to add a vertical-align:top to #changetitle so it moves to the top.

Upvotes: 2

Mushr00m
Mushr00m

Reputation: 2356

You have a lot of options and some things to change :

1 - If you want to use display: inline-block; you need to remove the margin right on your #menu ul and add display: inline-block on the #menu.

2 - if you want to use floats, add float: left; on the #menu.

3 - You can also uses display: table.

Best thing to do, have a look at this http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Upvotes: 1

Related Questions