Problem 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 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">
  开发者_C百科  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

Try the following. ids are used for unique content and should be used once only per page. Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).

<html>
<head>
<style type="text/css">

.textcontent {
    float: left;
    border: 1px solid red;
    width: 700px;
    margin-bottom: 4px;
    }

.ads {
    float: left;
    width: 120px;
    border: 1px solid green;
    }

.textcontent:before {
    clear: left;
    }

</style>

</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

</body>
</html>

Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.

HTML:

<div class="mainbulk">
    <div class="ads">
    ads would, hypothetically, be placed here if this were actually an actual website.
    </div>
    <div class="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>

CSS:

.mainbulk {
    padding: 1.5em 2% 1.5em .5em;
    border: 1px solid #000;
}
.ads {
    width: 7.5em;
    float:right;
    text-align: right;
    border: 1px dotted #f00;
}
.textcontent {
    max-width: 40em;
    float: right;
    border: 1px dotted #00f;
}

I believe I can help!

What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.

Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.

What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.

The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.

There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .

This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!