4 Columns Elastic CSS with Top-Left Box Spanning 2 Columns. How

4 columns elastic css with top-left box spanning 2 columns. How?

<html>
<head>
    <style>
        #outer, #left, #right, #top_left, #bottom_left,
        #bottom_left_left, #bottom_left_right, #right_left, #right_right {
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }
        #outer {position:relative;}
        #left {right:50%;}
        #top_left {position:relative;}
        #bottom_left {position:relative;}
        #bottom_left_left {right:50%;}
        #bottom_left_right {left:50%;}
        #right {left:50%;}
        #right_left {right:50%;}
        #right_right {left:50%;}
    </style>
</head>
<body>
    <div id="outer">
        <div id="left">
            <div id="top_left">Top left</div>
            <div id="bottom_left">
                <div id="bottom_left_left">Bottom left</div>
                <div id="bottom_left_right">Bottom right</div>
            </div>
        </div>
        <div id="right">
            <div id="right_left">Near Right</div>
            <div id="right_right">Far Right</div>
        </div>
    </div>
</body>
</html>

4 fixed width columns with top-left box spanning 2 columns. Centered. How?

Not sure I understand exactly what you're asking, but something like this...?

<div style="float: left;">
    <div style="width: 420px;">top</div>
    <div style="width: 200px; float: left;">bottom left</div>
    <div style="width: 200px; float: left;">bottom right(ish)</div>
    <div style="clear: both;"></div>
</div>
<div style="width: 200px; float: left;">big left box</div>
<div style="width: 200px; float: left;">big right box</div>

Create leading dots in CSS

Taken from this article on Leader Dots with CSS:

The field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text. So to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element.

Here is the CSS:
.dots { 
  background: url('dot.gif') repeat-x bottom; 
}
.field {
  background-color: #FFFFFF;
} 
To apply this to the example form, you would just use it as:
<div class="dots">
    <span class="field">LastName</span>
</div>

Here's a image to use for the dot: https://i.stack.imgur.com/otJN0.png

Demo in Stack Snippets

.dots {   background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom; }.field {  background-color: #FFFFFF;}.link {  width: 150px;  display: inline-block;}

<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 1  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 2  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 3  </span></div>

CSS - create a dynamic tag shape facing to the right

You just need to position the arrow according to the right side of the tag with the right property instead of the left property :

.pricetag {  position: relative;  margin: 0 5px 0 10px;  display: inline-block;  height: 46px;  padding: 0 35px 0 15px;  background: #E8EDF0;  font-size: 20px;  line-height: 41px;}.pricetag:before {  position: absolute;  content: "";  left: -15px;  width: 1px;  height: 0px;  border-right: 14px solid #E8EDF0;  border-top: 23px solid transparent;  border-bottom: 23px solid transparent;}/**********/
.pricetag-right {  position: relative;  margin: 0 5px 0 10px;  display: inline-block;  height: 46px;  padding: 0 35px 0 15px;  background: #E8EDF0;  font-size: 20px;  line-height: 41px;}.pricetag-right:before {  position: absolute;  content: "";  right: -15px;  width: 1px;  height: 0px;  border-left: 14px solid #E8EDF0;  border-top: 23px solid transparent;  border-bottom: 23px solid transparent;}

<span class="pricetag">no problem with long or short text (length auto adjusts)</span><br><br/><span class="pricetag-right">need to create a new class for each length</span><br/><br/><span class="pricetag-right">need to create a nqsdqsdqsdqsdqsdqsdew class for each length</span>

How do I get a div to float to the bottom of its container?

After struggling with various techniques for a couple of days I have to say that this appears to be impossible. Even using javascript (which I don't want to do) it doesn't seem possible.

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

I guess I'll have to revisit the design goals for this item unless anyone has a last minute suggestion.

How to style a div to be a responsive square?

Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

Why would you choose a fixed-width design?

And here, as expected, comes the usual canard: “long lines are too hard to read”.

[Citation needed], folks.

See http://webusability.com/article_line_length_12_2002.htm for a summary of actual research in this area. A number of these, plus http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp, find that although users express a preference for moderate line lengths, reading speeds do not sharply drop off with ‘long’ lines; in fact many show increased speeds with the longer settings.

As long as it's not ridiculously long, and taking care to use a decent amount of leading, long lines are not generally a real issue at today's typical browser widths and default font sizes. (If you're one of those designers that loves to use teeny-tiny type for everything, it could be an issue, but then you're already making it impossible to read with the flyspeck text. Stop it!)

So as it's only an option of user preference that prefers medium-short lines, let us users decide how much screen space we want to give the web site to get our work done. We're the ones best-equipped to know. If you decide you know definitively best you're likely to waste space, or, if you guessed too long, make us scroll back and forth sideways to read the text — and that really is a readability nightmare.

If you want to protect us from ourselves, you can compromise by specifying a min-width and max-width in ‘em’ units so that the page is responsive to liquid layout, but doesn't get stretched to extremes.

But otherwise, the best reason to design fixed-width is indeed that it is easier, especially for someone with a fixed-2D-grid view of the world and static visual-design tools like Photoshop.

4 Columns Elastic CSS with Top-Left Box Spanning 2 Columns. How