CODEWITHSUNDEEP
htmlcss
Mathematics
Mathematics

Reputation: 7618

Move ul list below div

I am trying to move this ul below a div, I am not even sure if this is the perfect way to do it as well,

Here is the code,

HTML

<div class="first">
    <div id="Pic">
        <img src="http://48jwh53mcwj217jvx11dcwjj.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/avatar-2.jpg">
    </div>
    <div id="Name" class="left"> <span>User 1</span>

    </div>
    <div id="contactDetails" class="left">
        <ul style="float: left;">
            <li>
                <img src="https://tutorials.hostmonster.com/help_media/email.png"><span id="Email">[email protected]</span>

            </li>
            <li>
                <img src="https://tutorials.hostmonster.com/help_media/email.png"><span id="PhoneNumber">000000</span>

            </li>
        </ul>
    </div>
    <div style="clear: both;"></div>
</div>

CSS

#Pic img {
    width: 128.5px;
    height: 128px;
    /* padding: 10px 7px 10px 7px; */
    float: left;
    border: 1px solid lightgrey;
    margin-top: 4px;
    margin-right: 5px;
}
#Name {
    font-family:"Segoe UI Light", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
    font-size: 2.3em;
    color: #777;
    font-weight: 200;
}
.left {
    float:left;
}

Fiddle

http://jsfiddle.net/fc2oya05/1/

What I want it to look like

enter image description here

Upvotes: 1

Views: 827

Answers (8)

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

CSS 

.UIClass{
    float: left;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

Here is My Demo

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

You can check with the below link.

Demo

#Email
{
    margin-left:10px;
}
#PhoneNumber
{
   margin-left:10px; 
}

Upvotes: 1

Steevan
Steevan

Reputation: 826

You can check with the below link. You just have to remove float: left.

Fiddle

.left{
     margin-left:13%;
    }

Upvotes: 1

Onkar Deshpande
Onkar Deshpande

Reputation: 234

wrap name and details in one div <div class="userDetails"></div> and remove class left to some elements. Updated fiddle

Upvotes: 1

Jonathan La&#39;Fey
Jonathan La&#39;Fey

Reputation: 552

Take a look at your updated fiddle

You need to remove the float from your div,

.left{
/* float:left; */
}

And you should replace the float in your ul with the following to remove the bullets in your list

<ul style="list-style-type: none;">

Upvotes: 3

akash
akash

Reputation: 2157

<div id="Name" class="left">

remove class form name id 

<div id="Name">

demo

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

Wrap Name and ContactDetails to another div having class left:

HTML:

<div class="first">
    <div id="Pic">
        <img src="http://48jwh53mcwj217jvx11dcwjj.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/avatar-2.jpg">
    </div>
    <div class="left">
        <div id="Name"> <span>User 1</span></div>
        <div id="contactDetails">
            <ul>
                <li>
                    <img src="https://tutorials.hostmonster.com/help_media/email.png" class="left"><span id="Email">[email protected]</span>

                </li>
                <li>
                    <img src="https://tutorials.hostmonster.com/help_media/email.png" class="left"><span id="PhoneNumber">000000</span>

                </li>
            </ul>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

#Pic img {
    width: 128.5px;
    height: 128px;
    /* padding: 10px 7px 10px 7px; */
    float: left;
    border: 1px solid lightgrey;
    margin-top: 4px;
    margin-right: 5px;
}

#Name {
    font-family: "Segoe UI Light","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 2.3em;
    color: #777;
    font-weight: 200;
}

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

#contactDetails ul li img {
    margin-right: 5px;
}

.left{
    float:left;
}

Updated demo

Upvotes: 2

G.L.P
G.L.P

Reputation: 7207

ADD the following code in your css file: Demo. If you want to be specific, add class / ID for <ul>

ul{
    clear:both;
    font-size:12px;   
    margin:0;
    padding:0;
}
li{
    list-style-type:none;
}

Upvotes: 2

Related Questions