CODEWITHSUNDEEP
htmlcsspercentage
alvaromat
alvaromat

Reputation: 87

CSS: Div wrapping a floating element

I have the following:

non-adaptable div

And I want this:

adaptable div

If I remove margin-left: 200px; from the first I get the second, but my problem is that if I put another div into <adaptable div> with witdh="100%", its width become 600px (400px + 200px of floating div), so the div is placed in the "BIG ZONE" and the 400px zone is blank.

How can I do to first fill the 400px zone and then the BIG ZONE?

Example of html: http://jsfiddle.net/wce25bu1/1

.big {
  height: 400px;
  background: #f00;
  border: 1px solid black;
}

.float {
  width: 200px;
  height: 200px;
  background: white;
  float: right;
}

.table {
  width: 100%;
}


}
<div class="big">
  <div class="float"></div>
  <table class="table">
    <thead>
      <tr>
        <th>Raffle name</th>
        <th>Ticket number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This shoud be</td>
        <td>next to the float</td>
      </tr>
    </tbody>
  </table>
  <p>TEXT </p>
</div>

I want the table to be aligned with the floating element.

Upvotes: 0

Views: 103

Answers (5)

Nazmul Hossain
Nazmul Hossain

Reputation: 2085

I think it will help you.

.big {
    width:600px;
    background: #f00;
    border:1px solid black;
   
}

.float {
    width: 200px;
    height: 200px;
    background: white;
    float:right;   
}
.table{
    width:350px;
}

.table td{
text-align : center;
}
<div class="big">
     <div class="float"></div>
<table class="table">
                    <thead>
                    <tr>
                        <th>Raffle name</th>
                        <th>Ticket number</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2nd Feb Raffle</td> <td>0001</td>
                    </tr>
                    <tr>
                        <td>12nd Feb Raffle</td> <td>0595</td>
                    </tr>
                    <tr>
                        <td>20nd Feb Raffle</td> <td>1201</td>
                    </tr>
                    <tr>
                        <td>22nd Feb Raffle</td> <td>0562</td>
                    </tr>
                    </tbody>
                </table>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ad et neque quod nobis tenetur earum voluptatem culpa nihil soluta sequi laborum blanditiis suscipit distinctio tempora quisquam at sapiente consequatur natus minus dolorum labore sint nam rerum atque! Distinctio veniam at natus debitis aperiam perspiciatis vel ipsa officiis voluptatem laudantium magnam obcaecati magni dolor unde aspernatur eaque provident. Perspiciatis officiis quo debitis optio velit explicabo voluptas sint quae cupiditate laudantium. Aut similique exercitationem corporis necessitatibus vero ipsum facere nihil sed odio aliquam nisi placeat eligendi nam. Possimus quae enim aspernatur itaque culpa doloribus architecto dolorum magnam ut laborum. Quidem totam vel earum recusandae velit iste esse eos beatae error dignissimos perspiciatis et natus neque animi maxime quas voluptate explicabo id deleniti adipisci iure sit sequi laudantium laboriosam porro! Ea dolorum quam officia totam repellendus eius facere saepe? Ipsum officia dolore magni dicta dolorem alias doloribus laudantium maiores officiis sequi impedit sapiente recusandae assumenda fugiat quas illo quia dolores molestias optio amet architecto laboriosam modi culpa praesentium magnam vero cumque quis. Aspernatur odio ab asperiores obcaecati perspiciatis alias quod dolor laborum nihil porro ea nemo quam illum ducimus sunt vel exercitationem? Omnis magni dolore sunt dolor magnam inventore quisquam quod quasi non reiciendis eius natus eos molestiae sapiente similique veniam amet officiis ipsam laudantium ad eligendi nesciunt doloribus ipsa quibusdam libero adipisci unde. Rerum voluptate voluptatum voluptatem sapiente quasi odio enim facere nihil quam ratione repudiandae nisi nulla officia hic a illo quae maiores neque voluptatibus quod provident corporis eos in deserunt voluptas saepe dolor possimus vitae deleniti eius! </p>
   
    
</div>

Upvotes: 1

Lazertrax
Lazertrax

Reputation: 66

This should be fairly easy to create. You shouldn't give the table width:100% because this will make it fill it's parent element's width and thus it it's wrapped in a new line. What I did is that I changed that to min-width:400px; and added a margin:0 auto; so that the table is always centered in the area to the left of the white box (in case you want to increase the big red box's width beyond 600px)

Here is the demo jsfiddle : http://jsfiddle.net/wce25bu1/4/

Hope this helps.

Upvotes: 1

John Reid
John Reid

Reputation: 1185

You can use the CSS3 property calc to get the table to fill the space:

table{
    width: calc(100% - 200px);  
}

This will use 100% and remove 200px. This is really the only way to mix percentages and fixed units.

This won't work in IE8 though (http://caniuse.com/#feat=calc).

Upvotes: 0

Opi Hana
Opi Hana

Reputation: 133

Have you considered using relative and absolute positioning?

UPDATE: I've simply rearranged the container divs. Is this what you're looking for? http://jsfiddle.net/dzhu46Lx/4/

CSS:

.float {
 float: right;
 width: 200px; 
 height: 200px;
 background-color: blue;
}
.content{
 position: relative; 
 background-color: red;
 width: 600px;
}
.main-content{
 width: 400px;
}

Upvotes: 0

error
error

Reputation: 756

You could work around the issue by giving the width="100%" div a margin-right of -200px (so it fits into the smaller section), or in CSS make the width: calc(100% - 200px).

You shouldn't need to specify a width on the inner div at all, if it is display block it should fit its container div automatically.

Upvotes: 0

Related Questions