I have a flex container with columns flex direction and 3 divs in it. The first and the third div take as much height as their content takes, while the second one (which I'll call A) takes the remaining space. It should be obvious, but I'll add it anyways. A's height is unknown.
Inside A I'll have a random number of images with unknown width/height. All those images will occupy a single row (just like a carousel). The images must:
occupy the biggest possible area of A, but
keep their aspect ratio, and also
don't occupy more than 1/3 of the width of the visible area of A, and also,
no gaps between the images
The second requisite I could easily accomplish with max-width: 33%, but the first one is not that easy. It seems that max-height: 100% is being ignored.
Here is a demo: http://codepen.io/alexandernst/pen/oxqBPv
And here is the expected result:
|-------------------------------------------------|\
| | \
| |---------------------------------------------| | \
| | up | | \
| |---------------------------------------------| | \
| | |
| |---------------------------------------------| | |
| | ######### | | |
| | ######### | | |
| | ################ ######### ################ | | |
| | #### 33 % w. ### ######### #### 33 % w. ### | | |
| | ################ ######### ################ | | 400px
| | ######### | | |
| | ######### | | |
| |---------------------------------------------| | |
| | |
| |---------------------------------------------| | /
| | down | | /
| |---------------------------------------------| | /
| | /
|-------------------------------------------------|/
I hope now it is what you wanted to achieve: http://codepen.io/kbkb/pen/jqzBKJ
You where missing a height to the containing div. The max-height didn´t know what 100% is because the parent element had no height. ( i now set 88% height because it was what was fitting, but you should determine the height of up and bottom and substract them from 100% e.g. `calc(100% - 20px)).
With text-align:center i am then centering the images.
Also i added box-sizing: border-box this solves the problem that when you have an element with height X and add a border of 1 px you would have height: X+2. Trough border-box the border applies inside the element not outside on top of the height.
Related
I am using mpdf to convert html page. I have added code like below.
$html=$this->load->view('client_admin/test_poepdf',$data, true);
$pdfFilePath ="Test_".$task_id.'_'.$startdate.'.pdf';
$pdf = $this->m_pdf->load();
$stylesheet ='';
$stylesheet .= file_get_contents(base_url().'assets/css/bootstrap.min.css'); // external css
$stylesheet .= file_get_contents(base_url().'assets/css/icons.css'); // external css
$pdf->WriteHTML($stylesheet,1);
$pdf->WriteHTML($html,2);
$pdf->Output($pdfFilePath, "D");
$pdf->Output($destination2, "F");
I added one image in mpdf page and added width for it like below:
<td style="width:100%;"><img src="<?php echo base_url();?>assets/poeimages/<?php echo $filename;?>" class="side_logos" id="poeid" style="width:1300px;height:auto;"></td>
</tr>
but image width is not applying if i open in browser it is applying. Please help me.
When mPDF generates your PDF it puts nearly all your content inside the "print area". The print area is calculated as: page box minus margins.
______________________________
| | |<- sheet
| |<--+-- crop marks
| ______________________|___|
| | A | |
| | ______________ |<--+-- page box
| | | HEADER | | |
| | D | | B | |
| | | | | |
| | | |<--+---+-- page box minus margins = printed area
| | | | | |
| | | | | |
| | | | | |
| | |___FOOTER_____| | | A: margin-top
| | C | | B: margin-right
| |______________________| | C: margin-bottom
| | D: margin-left
|_____________________________|
Ref: http://mpdf.github.io/paging/using-page.html
From your example, I see you've got your image inside a <table> tag. If the table width (not the <td>) isn't set to 100% then that would further restrict the total width of your image.
You've a couple of options here. You can set the page margins to zero and your table to 100%:
<style>
#page {
margin: 0;
}
table {
width: 100%;
}
</style>
Doing this will mean you need to add left and right margins / padding back into the elements you don't want to have a 100% width though.
Or you can extract your image from the table and place it in a top-level <div> tag which you absolute position on the page:
<div style="position: absolute; left: 0; width: 100%; >
<img src="" />
</div>
Absolute positioning will mean you don't have to mess with the page margins, but you take the image out of the document flow which could cause display problems if you aren't careful.
I have a page in which I have a structure of divs in an inline block. Now each of the block divs have a minimum size and when the window size reduces to a size smaller than the sum of all the inner divs minimum width, I move some of the elements to the next line. I would now like a padding to be added to the div which moves to the next line alone and I am not looking to use js to achieve this. How can I do this in just CSS?
<div width="100%">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
</div>
Rendering
------------------- ------------------- -------------------
| | | || |
| | | || |
| div1 | | div 2 || div 3 |
| | | || |
------------------- ------------------- -------------------
constrained space
------------------- -------------------
| | | |
| | | |
| div1 | | div 2 |
| | | |
------------------- -------------------
<^margin 5px inserted^>
-------------------
| |
| |
| div 3 |
| |
-------------------
You can use media queries to apply CSS rules based on the width of the viewport.
#media all and (max-width: _width_value_) {
/* When the screen size is less than or equal to _width_value_ the css rules here will apply */
}
Here's a jsfiddle offering a solution to your original question.
margin-bottom will do the trick, however, it'll be there even when all of the divs are on one line. There's no other way without the JavaScript imho:
.innderDiv {
display:inline-block;
width: 33%;
max-width: 300px;
min-width: 135px;
border: 1px dashed;
margin-bottom: 5px;
}
http://jsfiddle.net/ruslans/KNDFE/
I have a box which contains an image, which has float:left set, and textual contents.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
I'd rather have it the following way (at least for considerably short lists, let's assume the list is short for now)
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)
However, in case of any long list items (longer than the small width of the content field),
the float is cleared.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won't fit. Lastly, the float is cleared.
Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?
Put the list inside a DIV that is also floated left with a defined width.
Try a plain overflow:hidden on your list - this should do the trick.
See the example.
I have a table with 1 row, and 3 columns. It's look like:
______________________
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
----------------------
The table has 940px width and 600px height. The first td and the last td should be the "container" sides. The web designer draw a concave - ) ( - PNG images for the sides. I must insert it with <img src""/>, because if I put the image for background, the image doesn't stretches. The problem is with the height of the image. Because every page is dynamic, I can't define the table height, or the image height. Every page should have auto height, but the problem is with the sides. If I insert the image with height='100%', the page goes long to the bottom of the page, because it has 2000px height. I tried with height:inherit, but no result. How could I declare the image?
You can use a background image and add background-size: contain or background-size: auto 100%.
I am trying to create a page that has a width that adjusts to the screen with a fixed width column on the right. So for example:
| | |
|-------Content------|--Column--|
| | |
| | |
|---Content---|--Column--|
| | |
| | |
|-----Content----|--Column--|
| | |
http://www.reddit.com/ would be a good example of this.
Thanks
This blog is pretty useful for grabbing complex layouts.
ultimate-2-column-right-menu-pixels
this is essentially what reddit does: http://jsfiddle.net/pxfunc/rCG84/
the side div 1.) is above content in the html, 2.) is set to float:right;, and 3.) given a specific width (width:300px)
<div id="side"></div>
<div id="content"></div>
the content div will adjust with the window size