CODEWITHSUNDEEP
htmlcss
pradeep cs
pradeep cs

Reputation: 523

margin, padding not working in my case

i couldnt move div content up. tried padding, margin. could u pls tel me where the problem is? here, the sample code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            .line1
            { 
               background-color:#AAAAAA;
               height: 100%;
               width: 1px;
               display: inline-block;
            } 
            .line2
            { 
               background-color:#CE5611;
               height: 100%;
               width: 1px;
               display: inline-block;
               margin-left: 121px;
            } 
        </style>
    </HEAD> 
    <body>
        <div id="a1" style='padding-left: 14px;width: 400px; height:148px'>
            <span style='display: inline-block'>
                <div>
                    <div>h1.1</div>
                    <div>h1.2</div>
                    <div>h1.3</div>
                    <div>h1.4</div>
                    <div>h1.5</div>
                    <div>h1.6</div>
                    <div>h1.7</div>
                </div>
            </span>
            <span class="line1"></span>
            <span style='display: inline-block'>
                <div>h2.1</div>
                <div>h2.2</div>
                <div>h2.3</div>
                <div>h2.4</div>
            </span>
            <span class="line2"></span>
            <span style='display: inline-block'>
                <div>h3.1</div>
                <div>h3.2</div>
                <div>h3.3</div>
                <div>h3.4</div>
            </span>
            <span class="line1"></span>
        </div>
    </body>
</html>

Upvotes: 0

Views: 524

Answers (3)

kobe
kobe

Reputation: 15835

I think you should change the layout.

Don't try to give divs inside a span, thats not a good approach.

what are h2.1 , h2.2

if you want lists to show , show UL or OL , orderred lists or undered lists..

Upvotes: 0

miguelSantirso
miguelSantirso

Reputation: 1253

This is not an answer to your problem, but a generic solution to all similar problems. Install Firebug in your firefox and inspect all elements to see which one is the problematic. It displays margins and paddings over the selected elements so that you can quickly detect it.

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186742

Are you looking for vertical-align:top; ?

Upvotes: 2

Related Questions