Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.
Related
I am learning html and css and I need to add spacing between each pane being displayed. How would I do this?
I currently have the below code which creates two columns for me. That's as advanced as I know how to get :)
<body>
<div class="row">
<div class="column">
<canvas id="Top left"></canvas>
</div>
<div class="column">
<canvas id="Top right"></canvas>
</div>
</div>
<div class="row">
<div class="column">
<canvas id="Bottom left"></canvas>
</div>
<div class="column">
<canvas id="Bottom right"></canvas>
</div>
</div>
</body>
<style type="text/css">
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
you need to add margin: 10px of your .column. then you will get some space.
Hey you should try using padding and margin attribute of CSS and set margin-left=desired pixels and do the same with margin-right or use padding-right or left.I hope this answers your question
I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px
My code is as below..
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="home">
<div class="intro">
<div class="row">
<div class="col-xs-5" style="background-color:blue">
<img src="img/mockleft.png" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6" style="background-color:red;">
<img src="img/mockright.png" alt="logo" style="width:100%;">
</div>
</div>
</div>
</body>
The output is as below..
I wish for two things..
a) The left div with blue background should be same height as right div with red background and vice versa.
b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.
I tried the vertical-align css to both the div as well as image without success.
All help is sincerely appreciated
Thanks
You could do it with flexbox. If you use Bootstrap 4 as #Pete suggests in the comments, you could achieve the same, since it uses flexbox.
JSFiddle Demo
.row {
display: flex;
}
.col-xs-1 {
width: 10%;
}
.col-xs-5 {
display: flex;
flex-direction: column;
width: 40%;
background: blue;
justify-content: flex-end;
}
.col-xs-6 {
width: 50%;
background: red;
}
<div class="row">
<div class="col-xs-5">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
</div>
a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height:
How can I make Bootstrap columns all the same height?
b) For that part, use auto margin:
<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">
Hope it helps :)
See my code at codepen
I'm trying to horizontally center the circle progress bar in the page, I tried setting margin: 0 auto; on the div, it didn't work. I, also, tried setting text-align: center on the parent div and setting the div to display: inline-block, no success as well.
This is the element in the HTML I'm trying to center:
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is the CSS I'm applying on the element:
.col-md-12{
width: 100%;
}
.timer{
width: 100%;
margin: 0 auto;
}
Remove float: left; or set it to none in .c100 css class.
.c100 {
float:none;
}
I think it should be like this.
<center>
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
Replace your existing CSS rules with:
.col-md-12 {
text-align: center;
}
.timer {
display: inline-block;
}
<div class="timer"> <!-- this one should be centered -->
.timer{
width: 100%;
margin: 0 auto;
}
It is centered. It is also 100% wide, so being in the center is the same as being left or right aligned. It takes up all the space.
You need to set a smaller width in order for it to noticeably appear in the center.
Remove float: left;from .c100 class to center the div.
If that's what you wanted:
CodePen example
I added:
.timer {display: flex}
and also added a new class to it's only child
.align {margin: 0 auto !important;}
as .c100 overrides margins.
I have a problem with responsiveness. In my example by right side there's 30 px blank place. I don't know how the hell fix it. Does somebody have any idea? http://jsfiddle.net/98p3webw/ details details details details
.imageeee {
position:absolute;
max-width: 100%;
}
.logo{
max-width: 100%;
max-height: 100%;
}
.max{
width: 100%;
position:relative;
}
.background{
position:absolute;
width: 100%;
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
height: 100%;
background-size: cover;
}
<body>
<div >
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
<div class="background col-md-12">
<div class="max">
<div class="col-md-2"></div>
<div class="col-md-8 thumbnail" style="top: 40px;" >
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
The 15 pixel spacing you are seeing are being added by Bootstrap's row class.
.row {
margin-left: -15px;
margin-right: -15px;
}
In Bootstrap, .row elements should be wrapped by a .container or container-fluid element.
From the Grid system section of the Boostrap docs:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
So wrapping your .row element in a .container should solve your immediate problem.
JSFiddle Example:
<div class="container">
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
</div>
Further Reading:
You might want to read over the Boostrap docs for the grid system so you can make sure you use it correctly in other places. Also, the <center> tag is deprecated, You should use the CSS test-align property instead.
I have the following html:
<div class="wrapper">
<h1>Ipods</h1>
<div class="main-topright-bottom">
<h1>Related Products</h1>
<div>Check items to add to the cart or select all.</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A red ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A blue ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
</div>
</div>
and css:
.wrapper { background: blue; }
.relatedproduct { clear: both; }
.relatedproductimage { float: left; }
.relatedproducttext { float: left; }
I want to know how come the blue background does not extend to the bottom div.
What am I doin wrong?
http://jsfiddle.net/johngoche99/C9NKP/2/
Thanks.
Floats aren't contained by default. You make it do this by floating the wrapper too, or giving it an overflow property.
.wrapper {
overflow: hidden;
}
jsfiddle demo
Read http://colinaarts.com/articles/float-containment/ for another (better) alternative if you don't want to hide overflow as a side-effect.
More information at https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context
change
.wrapper { background: blue; }
To
.wrapper { background: blue;overflow:hidden;}