Dynamic Width - CSS

Question

Does anyone know if the following is achievable with CSS?

I want the div.title and div.spacer to take up 100% of the width of div.row.

My goal is to have a tabbed panel. I'm pretty close, I just cant think of a way set the width of.spacer to fill the remaining space in div.row

Here is a screenshot of what I'm doing:

enter image description here

Here is fiddle: http://jsfiddle.net/yux2jr1n/

.row {
  width: 100%;
  display: block;
  display: content-box;
  margin: 0 auto 15px auto;
  border-left: solid 2px rgba(0, 0, 0, 0.3);
  border-right: solid 2px rgba(0, 0, 0, 0.3);
  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
  border-radius: 0px 8px 8px 8px;
  -moz-border-radius: 0px 8px 8px 8px;
  -webkit-border-radius: 0px 8px 8px 8px;
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: left;
  max-width: 1200px;
}
.tab {
  margin-top: -60px;
  display: content-box;
  float: left;
  width: 100%
}
.spacer {
  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
  float: right;
}
.title {
  border-left: solid 2px rgba(0, 0, 0, 0.3);
  border-right: solid 2px rgba(0, 0, 0, 0.3);
  border-top: solid 2px rgba(0, 0, 0, 0.3);
  border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
  -webkit-border-radius: 8px 8px 0px 0px;
  float: left;
  width: auto;
}
.clearfix {
  display: block;
  clear: both;
  width: 100%;
}

<section id="Work" class="row">
  <div class="tab">
    <div class="title">
      <h1><Span class="highlight">My Work</Span></h1>
    </div>
    <div class="spacer"></div>
  </div>
  <div class="clearfix"></div>
  <article>Some Content</article>
</section>

possible duplicate of CSS: Auto resize div to fit container width — Gan
– Gan, Commented Jan 17, 2015 at 20:09
Not a repeat, that involved having a static width. This site will have a fluid/responsive layout, needs to be able to dynamically adjust it's width relevant to screen size. — Mark
– Mark, Commented Jan 17, 2015 at 20:15

ouflak · Accepted Answer · 2025-01-07 12:12:08Z

1

UPDATE: See bottom of this answer...

I assume you want a line below the "tab" like this:

enter image description here

I did it by doing this:

    .tab {margin-left:-2px;border-bottom: solid 2px rgba(0,0,0,0.3);margin-right:-2px;}
.title {margin-bottom:-2px;background-color:#fff;padding-left:10px;padding-right:10px;}

And by deleting :

<div class="spacer"></div>

What you do is to add a line in full width using the "tab", then you add a massive color (white) to the background of "tab", and then you make the "tab" move down 2 px (margin:-2px) to cover over the whole line.

You can use the same solution when you have more tabs, and you only want the active tab have no line below.

Here is fiddler with the solution: http://jsfiddle.net/yux2jr1n/2/

enter image description here

-- Update:

See this fiddle: http://jsfiddle.net/yux2jr1n/5/

I made a "sidecover" to make the lines align correct on the right side.

edited Jan 7 at 12:12

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Jan 17, 2015 at 20:46

Preben

1,2872 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mark Over a year ago

this is close, but the problem I have is that my tabs and divs have no background. If you remove the background: #fff from your code the tab no longer works.

Preben Over a year ago

Why don't you want any background?

Preben Over a year ago

You can easily add custom background color to make it work on another backdrop. For instance that yellow color you have in your example image above.

Preben Over a year ago

What happened to "Keep it simple"? ;-) Ok, I understand. Let me think a bit :-)

Preben Over a year ago

Check here: jsfiddle.net/yux2jr1n/9 No background. Just a little css needed for the right side border

|

Collectives™ on Stack Overflow

Dynamic Width - CSS

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related