CODEWITHSUNDEEP
css
ANM
ANM

Reputation: 65

CSS - Alignment issues with image and text

Below is a screenshot indicating the manner I intend on placing an image and text above a list.

my desired design

Below is my screenshot in terms of my misalignment problem.

my alignment problems

Below is the HTML for the image, the "FIRSTNAME SURNAME" text and the list below it:

    <section class="vertical_menu_bar_section">
    <div id="img_logged_in_user">
          <img src="http://static3.depositphotos.com/1005574/205/v/950/depositphotos_2053115-Smile-button.jpg" 
               height="128" width="128" align="left" /><p>FIRSTNAME SURNAME</p>
    </div>        

    <div id='vertical_menu'>
        <ul>
           <li><a href='#'><span>CALENDAR</span></a></li>
           <li><a href='#'><span>TOTALS</span></a></li>
           <li><a href='#'><span>OPTION 3</span></a></li>
           <li><a href='#'><span>OPTION 4</span></a></li>
        </ul>
    </div>
<section>

Below is my CSS:

 /* Section - Vertical menu bar */
.vertical_menu_bar_section {
    color: #FFFFFF;
    background: #FF0000;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    clear: both;
    margin: 0;
    height: 100%;    
}

#vertical_menu {
  background: #FF00CC;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  font-size: 20px;
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  clear: both;
}

#vertical_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#vertical_menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#vertical_menu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #FFFFFF;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}

#vertical_menu a:hover {
  background: #2580a2 url("/public/images/hover.gif") left center no-repeat;
  color: #fff;
  padding-bottom: 8px;
}

/* */
#img_logged_in_user {
    clear: both;
    display: block;
    float: left;
    background: #2580a2;
}

Any ideas as to where I'm going wrong.

Thanks.

Upvotes: 0

Views: 51

Answers (2)

cdog
cdog

Reputation: 2084

To keep the image and name aligned you should set the width property of the wrapping element (which is #img_logged_in_user):

#img_logged_in_user {
  width: 250px;
}

Then set the image margin to add a spacing between them:

#img_logged_in_user > img {
  margin-right: 20px;
}

See live example here: http://jsfiddle.net/cdog/sbu24c45/.

Upvotes: 0

Anjula Ranasinghe
Anjula Ranasinghe

Reputation: 584

Please check if this is what you need Fiddle

For the both Divs .img_logged_in_user and .vertical_menuI have introduced to a one common Div named as .basic_div The width in the Basic_div will affect the both and will be aligned

Also added a <span> so the user name wont get below the pic.

Upvotes: 1

Related Questions