Home/ Questions/Q 7982795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T10:46:41+00:00

I’m writing a page that looks code wise like <div class=green> <span class=orange>s1</span> <span

  • 0

I’m writing a page that looks code wise like

<div class="green">  
  <span class="orange">s1</span>
  <span class="orange">s2</span>
</div>

but that should be formated via CSS like:
Layout explanation

  • The surrounding black frame shows the full page in the browser. (Think of <body></body>)
  • The red frame is a fixed width and fixed hight basically empty space that should be added by the CSS .green:before (I’m using it’s ability to format it’s borders for a visual effect)
  • The green frame shows the real content that should be as wide as necessary to contain both <span> in one line
  • The blue frame should be created by the CSS .green:after, has a fixed height and should take up all the space till the right border of the page – i.e. it must have a variable width.

Required browsers are the modern ones (Firefox, Chrome, Safari, Opera) in recent versions. No need to take care of IE. Mobile browsers would be great, though.

How can I achieve that? (All my attempts failed sooner or later…)

A jsFiddle with this example code is at http://jsfiddle.net/X2MDG/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m afraid that there is no way to satisfy all your constraints. The main things that don’t seem to have a CSS solution are:

    • Controlling the width of just the green bit can’t be done without affecting the width of the red :before and blue :after content. As you mention in the comments to the question, using a different DOM structure is not an option.
    • The blue (:after) content should take up all space not needed by the green (main) content.
    • The fixed height of red/blue may require some clearing on the elements below the entire div.

    So, as far as I could tell, the question as you asked it doesn’t have a 100% satisfying answer. Either way, here’s the code I came up with researching this problem, perhaps it can help you or others stumbling on this question. See either this jsfiddle or the code below:

    <div id="page">
    <div class="green">
        <span>Orange 1.</span>
        <span>Orange 2. Which can be really wide.</span>
    </div>
    <p style="clear: both;">Black is the page. Clearing is
            needed because the red and blue boxes are not in the 
            flow but do have quite some height.</p>
</div>

    CSS: 

    div#page { 
    border: 2px solid black;
    width: 80%;
    padding: 2px;
}

div.green:before {
    content: 'red / before';
    border: 2px solid red;
    float: left;
    display: inline-block;
    width: 140px;
    height: 200px;
}

div.green {
    border: 2px solid green;
}

div.green:after {
    content: 'blue / after';
    border: 2px solid blue;
    display: inline-block;
    float: right;
    height: 60px;
}

div.green span {
    border: 2px solid orange;
}
    • 0