unable to do padding-left - div two lines issue

Question

Provided the code link below

http://jsfiddle.net/4uw2o9s3/1/

I want to add a padding of 5px to the left of div #siteTitle content "line1" . But if i have the padding-left css rule under the div #siteTitle the two inner divs #siteTitle and "#quickNav" becomes split into two different lines. I want the content line1 and line2 in the same line with padding-left of 5px added to the line1 alone. could any one help me regarding this. Thanks a lot.

   #siteTitle {
        text-align:left;
        padding-left:5px;
    }

Answer 1

http://jsfiddle.net/vLbLbobf/1/

The problem is you have 2 columns side-by-side, each being 50% wide. When you then apply 5px padding to one of those as well, you get 50% + 50% + 5px width, which forces the second column down beneath the first.

The easiest, quickest fix is to put text-indent: 5px on #siteTitle instead of padding-left. This will only affect the first line of content, but if you only have one line, it'll work without any problems.

You can also put a <div> inside #siteTitle, then apply the following CSS rule

#siteTitle > div { padding-left: 5px }

This will apply the padding to an element which isn't set to 50% width, so it won't affect the parent column.