CODEWITHSUNDEEP
htmlcss
Julia Kotova
Julia Kotova

Reputation: 11

How to change "div" place in the flow?

There are two columns (left and right) with float positioning: http://jsfiddle.net/GBa4r/

<style>
    .container {width:200px;}
    .right {float: right; width: 30%;}
    .left {float: left; width: 70%;}​
</style>
<div class="container">
    <div class="right">2</div>
    <div class="left">1</div>
</div>

​ For print styles I need to change column places like in this example http://jsfiddle.net/GBa4r/1/ (".left" column above ".right")

What css code I should use in

   <link href="/css/print.css" media="print" type="text/css" rel="stylesheet" />

to do it without change html code?

Upvotes: 1

Views: 189

Answers (5)

I29
I29

Reputation: 686

Check out the following fiddle: http://jsfiddle.net/siyakunde/GBa4r/5/

Add to parent container:

display: -webkit-box; -webkit-box-direction: reverse;

remove from children: 

.right {float: right;}
.left {float: left;}

This was horizontal change.

If positioning is to be changed vertically as in, http://jsfiddle.net/siyakunde/GBa4r/6/

then, add

-webkit-box-orient:vertical;

to parent.

Upvotes: 0

I29
I29

Reputation: 686

Use the following CSS.

.container {width:200px;}
.right {background-color: #eaeaea; width: 30%;position: absolute;
top: 18px;}
.left {background-color: #ccc; width: 70%; position: absolute;
top: 0%;}​

Upvotes: 0

arvin_codeHunk
arvin_codeHunk

Reputation: 2390

A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174987

Use a specific print stylesheet. You can do it with the media attribute on the link element:

<link rel="stylesheet" media="print" href="print.css">

Or you could do so from inside of the CSS file:

@media print {
    /* print specific styles */
}

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157364

Use CSS @media queries

@media print {
  /*Styles goes here*/
}

Or use a print specific stylesheet using media="print"

<link type="text/css" rel="stylesheet" media="print" href="print_specific_sheet.css" />

Upvotes: 2

Related Questions