How do you solve this problem regarding aligning divs next to each other? [duplicate]
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Aligning divs next to each other?
I want this design:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.
I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.
My CSS code:
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
and HTML
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads w开发者_如何转开发ould, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
I'm encountering this problem:
http://www.screencast-o-matic.com/watch/c6lrXsXyQ
Full source 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" />
<title>Frotly</title>
<style type="text/css">
body, html {
font-size: 100%;
text-align: center;
padding: 0;
border: 0;
margin: 0;
}
#intro {
border: 0;
text-align: inherit;
width: inherit;
}
#content {
max-width: 50em;
margin: 0 0 0 .7em;
}
#header {
background-image: url(images/frotly.gif);
background-repeat: no-repeat;
height: 6.25em;
}
#menu {
text-align: left;
}
#mainbulk {
text-align: left;
}
#menu a {
height: 1em;
text-transform: uppercase;
padding: 0.15em .6em;
font-size: 0.9em;
margin: 0 .5em;
border-color: #000;
border-radius: 4px;
-moz-border-radius: 4px; /*Mozilla*/
color: #FFF;
font-weight: bold;
text-decoration: none;
}
#menu a:link{
border: px solid black;
background: url(images/menubg2.gif) repeat-x;
}
#menu a:hover {
background: url(images/menubginv.gif) repeat-x;
}
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
</head>
<body>
<div id="content">
<div id="intro">
<div id="header">
</div>
<div id="menu">
<a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a><a href="#">Page 6</a>
</div>
</div>
<div id="mainbulk">
<div id="textcontent">
<p>Frotly is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that Frotly can't do, then nothing can do it, but I'd suggest to try all of Frotly's features before complaining.</p>
</div>
<div id="ads">
sdjafjhdj fg dfg sdf sadf asdf asdf asdf asdf asdfa sd hgilehri hergiuesrh iofdshoiers f vpaeirg 9owaej waeoioje raoaednae dnirefn oeh råo hwog heirhg oesnr ieharg eanr poaergo neriuhg neiarginea rer gr.
</div>
</div>
</div>
</body>
</html>
#mainbulk { width: 960px; }
Set the width of the main container, or use min-width
加载中,请稍侯......
精彩评论