Home/ Questions/Q 3618464
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T22:45:20+00:00

Possible Duplicate: Aligning divs next to each other? I want this design: DIV1: auto-size

  • 0

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 would, 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #mainbulk { width: 960px; }

    Set the width of the main container, or use min-width

    • 0