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](http://stackoverflow.com/questions/14319097/css-auto-resize-div-to-fit-container-width) — Gan, Jan 17 '15 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, Jan 17 '15 at 20:15

Preben · Accepted Answer · 2015-01-17T20:52:41.670

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.

I

edited Jan 17 '15 at 20:52

answered Jan 17 '15 at 20:46

Preben

1,277
2
11
20

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. – Mark Jan 17 '15 at 20:52
Why don't you want any background? – Preben Jan 17 '15 at 20:53
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 Jan 17 '15 at 20:55
What happened to "Keep it simple"? ;-) Ok, I understand. Let me think a bit :-) – Preben Jan 17 '15 at 20:58
Haha, it's for my personal site, so, I want to have a little fun with it haha – Mark Jan 17 '15 at 20:59
1

Check here: http://jsfiddle.net/yux2jr1n/9/ No background. Just a little css needed for the right side border – Preben Jan 17 '15 at 21:25
@Preven, thanks! That is awesome. Put it as the answer and ill give you the points. – Mark Jan 17 '15 at 21:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69057/discussion-between-preben-and-mark). – Preben Jan 18 '15 at 10:48

Dynamic Width - CSS

1 Answers1