I want this design, which I have already managed to get:

DIV1: auto-size DIV2: 160px
________________  ________
|divnumberonediv| |divtwo|
|divnumberonediv| |divtwo|
|divnumberonediv| |divtwo|
|divnumberonediv| |divtwo|
|divnumberonediv| |divtwo|
|divnumberonediv| |divtwo|
-----------------  ------

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 code:

<style="text/css">
    #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>

and

    <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. Please click on this link to see.

1 answer

Behzad 20
0
points

try this:

#mainbulk {
        padding: 1.5em 2% 1.5em .5em;
}
#ads {
        width: 7.5em;
        float: right;
        padding: 0 0 0 2em;
}
#textcontent {
        width: 40em;
}

and

  <div id="mainbulk">
        <div id="textcontent">
            <div id="ads" align="right">
            ads would, hypothetically, be placed here if this were actually an actual website.
            </div>
            <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>
Answered almost 6 years ago by Behzad
  • I want it to be so that the ads column is floating to the right, so you can't get it out of the screen. DarkLightA almost 6 years ago
  • Do you mean the ads column in my code show out of the screen? if so, it's because of #textcontent width which is 40em. you must remove it or change it to 100% of page. Behzad almost 6 years ago