CODEWITHSUNDEEP
htmlcss
Paul Z.
Paul Z.

Reputation: 905

CSS: How to resize the right side element only?

Margin and resizing

I'd like to display price and description this way. And when the window width is resized, I want only middle part (inside blue rectangle) to be resized.

The red rectangle's width should not change for any window dimension.

I tried to use <table> tag, but it makes the first part to be wrapped.

$ sign wrapping

Here is HTML snippet for this:

<table class="notfootable">
    <tbody>
      <tr>
        <td><span class="usd">$</span><span class="monthly-cost">744.58</span></td>
        <td>
          <h4>Monthly Cost</h4>
          <p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
        </td>
      </tr>
    </tbody>
</table>

Note that <span class="usd"> has the following CSS attributes.

.usd {   
    vertical-align: top;
    display: inline-block;
    font-size: 11px;
    color: #1587AC;
    margin-top: 0.3em;
}

I added display: inline-block to add margin-top.

Upvotes: 1

Views: 3381

Answers (4)

Roy
Roy

Reputation: 8069

First, you don't want this to be formed inside of a table tag. It's not tubular data that inside of it. It's content.

Secondly, flexbox can come in handy to address this problem that you're having. It's easy to use and has many options to align your content on the x-axis and the y-axis within a div.

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

You can read more about flexbox at MDN.

With that in mind, I made a little sample to recreate what you want to achieve.

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.info {
  display: flex;
}
.price {
  display: flex;
  align-items: center;
  padding-right: 30px;
}
.cta {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
@media screen and (min-width: 600px) {
  .container {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .info {
    width: 80%;
  }
  .cta {
    display: block;
    justify-content: initial;
    width: 20%;
    padding-left: 30px;
    box-sizing: border-box;
  }
}
<div class="container">
  <div class="info">
    <div class="price">
      <span class="usd">$</span><span class="monthly-cost">744.58</span>
    </div>
    <div class="description">
      <h4>Monthly Cost</h4>
      <p>This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
    </div>
  </div>
  <div class="cta">
    <button>Billing details</button>
  </div>
</div>

Upvotes: 1

Ananth
Ananth

Reputation: 797

You can make use of flex layouts as below: HTML:

<div class="main">
  <div class="left">
    <span class="usd">$</span><span class="monthly-cost">744.58</span>
  </div>
  <div class="right">
    <div class="right-top">
      <h4>Monthly Cost</h4>
      <p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
    </div>
    <div class="right-bottom">
      <button>billing details</button>
    </div>
</div>

CSS:

.main {
 display: flex;
 flex-direction: row;
}

.left {
  align-self: center;
  padding-right: 55px;
}

.right {
  flex-direction:column;
}

More on flex layouts:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

JohnH
JohnH

Reputation: 2133

Enclose the two span of "usd" and "monthly-cost" within a div that has display display attributes of "inline-block" and a fixed width that is wide enough to accommodate the widest cost amount displays. This should keep those two spans inline as the display width is decreased.

Upvotes: 0

D_Wagner
D_Wagner

Reputation: 87

I believe to accomplish this you can use position: absolute on a <div> surrounding the blue rectangle and use position:relative on the parent container surrounding that element. On all other elements inside that container use position: relative.

Here is a somewhat similar question to yours: DIV absolute positioning - maintain position after browser window resize

Hope this helps.

Upvotes: 0

Related Questions