how to ask the div to not take up space by using css_问答_开发者

the below shows the css i am using, yes it not profesional i am a beginner regarding css.

i want to write some property in the css such that, the div's only take up the width needed and not more.

that is the width property set as width: 60%; etc takes 20% even if the control within it, or text within it is not that long. like say "hi" within the div takes 60% still!!!

css

#form1
{
    padding: 0px 0px 0px 0px;
    margin: 0px;
    display:inline-block;
    width:100%; 
    font-family: Times New Roman;
  开发者_开发技巧  font-size: 2em;

}

#container
{
    margin: 0 auto;
    width: 100%; 
    /*background-color: Yellow;*/  /* for testing*/
}



#header
{
    background: #ccc;
    padding: 20px; /*remove as needed*/
    color: Blue;
    text-align:center;
}



#navigation
{
    float: left;
    width: 100%;
    background: White;/* black*/
    color:White;
    font-size: smaller;
}


#ul
{
    margin: 0;
    padding: 0;
}



#link
{
    list-style-type: none;
    display: inline;
}










/* for url one */
#url1
{
    float: left;
    padding: 0px 5px 0px 5px;
    border-right: 1px solid #fff;
    background-color: White;
}

#url1 a
{
    float: left;
    color: Black;
    text-decoration: none;
}

#url1 a:hover 
{
     background-color:ButtonShadow;
     color:Highlight;
     text-transform:uppercase;
     font-size:xx-large;
}
/*for url one ends*/





#content-container1
{
     padding-top:5px;
     float: left;
     width: 100%;
    /*background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0;*/
}

#content-container2
{
    float: left;
    width: 100%;
    /*background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0;*/
}

#section-navigation
{
    float: left;
    width: 16%;
    border-right-color:White;
    border-right-style:solid;
    border-right-width:thin;
    /*background: gray;*/  /* for testing */
    display: inline;
}


#leftul
{
    margin: 0;
    padding: 0;
}



#leftlink
{
    padding-left:0.2em;
    list-style-type: none;
    /*background-color: Yellow;*/  /*for testing */
}  

#leftlink a
{
    color: Aqua;
    text-decoration: underline;
}



#content
{
    border-left-color: White; 
    border-left-style:solid;
    border-left-width:thin;
    float: left;
    width: 56%;

}


#aside
{
    float: right;
    width: 16%;
    padding: 20px 0;
    margin: 0 2% 0 0;
    display: inline;
}

#aside h3 { margin: 0; }

#footer
{
    clear: both;
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}

.symbols
{
    font-family: Webdings;

}

and the pic

how to ask the div to not take up space by using css

html as appears by ie6

<!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><title>

</title><link rel="stylesheet" type="text/css" href="LAYOUT1.css" /></head>
<body>
    <form name="form1" method="post" action="DynamicLayout.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZOy4VHs0ZOF6zRS6A7E09eCqf5GY" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKFjacpAqDAiY0LQudCxpijJWZK6qWohE+SufqyOGA=" />
</div>
    <div>
    </div>

    <div id="container" runat="server">
    <div id="header" runat="server">
        <span>The header from code label</span><input name="ctl03" type="text" value="This is the text box" />
    </div><div id="navigation" runat="server">
        <div id="ul" runat="server">
            <div id="link" runat="server">
                <div id="url1" runat="server">
                    <a class="symbols" href="#">H</a>
                </div><div id="url2" runat="server">
                    <a href="#">About</a>
                </div>
            </div>
        </div>
    </div><div id="content-container1" runat="server">
        <div id="content-container2" runat="server">
            <div id="section-navigation" runat="server">
                <div id="leftul" runat="server">
                    <div id="leftlink" runat="server">
                        LEFT SIDE
                    </div>
                </div>
            </div><div id="content" runat="server">
                This is the center of the page
            </div>
        </div>
    </div>
</div></form>
</body>
</html>

try this style

.asNarrowAsPossible
{
   width:1%; /* encourages the container to be very narrow */
   white-space: nowrap; /* forces the content to one line*/
}

how to ask the div to not take up space by using css

css

and the pic

html as appears by ie6

精彩评论

关注公众号

热门标签

图文推荐

how to ask the div to not take up space by using css

css

and the pic

html as appears by ie6

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：