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
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*/
}
加载中,请稍侯......
精彩评论