HTML/CSS - How can I position these nested unordered lists correctly?

Posted by Samuroid on Stack Overflow See other posts from Stack Overflow or by Samuroid
Published on 2013-10-30T21:39:42Z Indexed on 2013/10/30 21:54 UTC
Read the original article Hit count: 459

Filed under:
|
|
|

I am looking for some help resolving an issue im having with positioning the following unordered list elements that are contained in a div which has relative positioning:

The html structure of the UL:

<div id="accountBox" class="account_settings_box">
                            <ul>
                                    <ul>
                                        <li class="profileImage"><img src="images/profileimage.jpg" alt="Profile Image" /></li>
                                        <li class="profileName">Your name</li>
                                        <li class="profileEmail">Your email</li>
                                    </ul>
                                <li><a href="">Messages</a></li>
                                <li><a href="">Settings</a></li>
                                <li><a href="">Password</a></li>
                                <li><a href="">Sign out</a></li>
                            </ul>
                        </div>

and the CSS for this list:

.account_settings_box ul ul  {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 150px;
    outline: 1px solid blue;
}

.account_settings_box ul ul li {
    display: inline-block;
    border: none; /* Reset the border */
}

.profileImage {
    float: right;
    display: block;
    width: 150px;
    height: 150px;
    outline: 1px solid purple;
}

.profileName, .profileEmail {
    width: auto;
    height: auto;
    width: 150px;
    height: 150px;
}

.account_settings_box ul ul li:hover {
    outline: 1px solid red;
}

.profileImage img {
    width: 150px;
    height: 150px;
}

I am having difficultly with the embedded ul, i.e, .account_settings_box ul ul element.

The image below shows what it currently looks like.

I am trying to achieve the follow:

Have the image floating to the right, and have the "your name" and "your email" positioned to the left of the image (basically where they are currently).

Unordered list screenshot

Thanks for your help in advance.

Sam :)

© Stack Overflow or respective owner

Related posts about html

Related posts about css