Html/css positioning help_问答_开发者_运维开发者技术经验分享

Html/css positioning help

How do I align yellow side by side with red while keeping the 'Skills' text underneath the grey?

What i've tried: using float:left with red but that pushes up the skills text aswell. I've tried using relative and absolute but they're confusing to me.

HTML: Key div id's: profiletable (grey), profileleft(red), profileright (yellow).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Starbuzz Coffee</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div id="allcontent">
            <div id="header">
            </div>

            <div id="main">
                <h1>Jonny</h1>
                <div id="profiletable">
                    <div id="profileleft"><?php echo $gravatar ?></div>
                    <div id="profileright">
                        <strong>Name:</strong> <?php echo $member->getFirstName() . ' ' . $member->getLastName(); ?><br />
                    <strong>Name:</strong> <?php echo $member->getFirstName() ?><br />
                    </div>
                </div>



                <h1>Skills</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries, but also the leap into
                    electronic typesetting, remaining essentially unchanged. It was popularised in
                    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                    and more recently with desktop publishing software like Aldus PageMaker including
                    versions of Lorem Ipsum.
                </p>开发者_如何学JAVA;
            </div>

            <div id="sidebar">
                <p class="beanheading">
                    sidebar
                </p>

            </div>

            <div id="footer">
                &copy; 2005, Jonny
            </div>
        </div>
    </body>
</html>

CSS: key id's at the very bottom

body { 
    background-color: #eeeeee;
    font-family:      Georgia, "Times New Roman", Times, serif;
    font-size:        small;
    margin:           0px;
}

#header {
    background-color: #675c47;
    margin:           10px;
    height:           108px;
}

#main {
    background:       #ffffff;
    font-size:        105%;
    padding:          15px;
    margin:           0px 10px 10px 0px;
    width:            510px;
    float:            left;
}

#sidebar {
    background:       #7DCFE7;
    font-size:        105%;
    padding:          15px;
    margin:           0px 0px 10px 540px;
}

#footer {
    background-color: #675c47;
    color:            #efe5d0;
    text-align:       center;
    padding:          15px;
    margin:           10px;
    font-size:        90%;
    clear:            left;
}

h1 {
    font-size:        120%;
    color:            #954b4b;
}

.slogan { color: #954b4b; }

.beanheading {
    text-align:       center;
    line-height:      1.8em;
}

a:link {
    color:            #b76666;
    text-decoration:  none;
    border-bottom:    thin dotted #b76666;
}
a:visited {
    color:            #675c47;
    text-decoration:  none;
    border-bottom:    thin dotted #675c47;
}

#allcontent {
    width:            800px;
    padding-top:      5px;
    padding-bottom:   5px;
    background-color: #675c47;
    margin-left:      auto;
    margin-right:     auto;
}

#profiletable{
    width:           510px;
    background:      #eee;
}

#profileleft {
    background:       red;
    font-size:        105%;
    padding:          0px 10px 10px 0px;
    margin:           0px 10px 10px 0px;
    width:            128px;
}

#profileright {
    background:       yellow;
    font-size:        105%;
    padding:          0px 10px 10px 0px;
    margin:           0px 0px 10px 128px;
    width:            200px;
}

Change the margin on #profileright to margin:0px 0px 10px 10px; [ you modify the last value for the margin for the left side of the element]
Add float:left; on #profileleft and on #profileright
Add in your css the following .clear {clear:both};
After the #profileright add <div class="clear"></div>

live example [fixed - I had position the clear div in wrong position]: http://jsbin.com/afonu3/2

First of all, if you are working fixed-width, you can always position using top and left.

But to have a more fluent layout, put

profileleft as float: left,
profileright as float: left; clear: right

and then your skills will fall under those (you can even add a float: left).

You might need a small closing element under profileright and skills (a <br /> with clear: both should do)

in your CSS set your red and yellow divs to have the following:

float: left;
display: inline-block;

Create a new style

.clear {
    clear: both;
}

Put in any block element, I use a div, with the class='clear' after the yellow block and before your Skills header.

Add a

float:right;

to #profileright

then clear it with <br clear="all"> here:

<strong>Name:</strong> 
<?php echo $member->getFirstName() ?>
<br />
</div>
<br clear="all" />
</div>

Html/css positioning help

精彩评论

关注公众号

热门标签

图文推荐

Html/css positioning help

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：