Unfortunately I have to support IE7 (and preferably IE6)
In IE8, Safari, Firefox, Chrome, I get a perfectly good layout ujsing an outer div to enlose two boxes.
------------------------------------
| |
| -------------- ----------- |
| | | | | |
| | A | | B | |
| | | | | |
| -------------- ----------- |
| |
------------------------------------
I'm using inline-block to style A and B. A is floated left, B right. Both boxes have internal divs and other elements.
However, when I use IE6 and IE7 I get this monstrosity.
------------------------------------
| |
| -------------- |
| | | |
| | A | |
| | | |
| -------------- |
| ----------- |
| | | |
| | B | |
| | | |
| ----------- |
| |
------------------------------------
Any definitive answers to what is going on and how to solve it?
Firstly, put a DOCTYPE at the top of your document. This forces IE into standards compliant rather than quirks mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Secondly, if you want IE6 compatibility use floats (Andrew is quite correct in stating that display: inline-block only works in IE7 on elements with natural display: inline and <div> has natural display: block). This should work:
<div id="outer">
<div id="left"></div>
<div id="right"><>/div>
</div>
with:
#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }
as long as the widths of left and right are less than the width of outer including padding, borders and margins. If not, right will drop down to the next line.
In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Are your boxes <div>s? If yes, it should work.. Do you have a test case? (See quirksmode.org for more info!)
IE block level element inline-block hack: this may be useful for you
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.
Is it possible to do this using css (and how)?
------------------------------------------
| ---------- ---------- ---------- |
| | Child 1 | | Child 3 | | Child 5 | |
| ---------- ---------- ---------- |
| ---------- ---------- ---------- |
| | Child 2 | | Child 4 | | Child 6 | |
| ---------- ---------- ---------- |
| ---------- |
| | Child 7 | |
| ---------- |
| ---------- |
| | Child 8 | |
| ---------- |
------------------------------------------
using the following :
<div class="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
<div class="child">Child4</div>
<div class="child">Child5</div>
<div class="child">Child6</div>
<div class="child">Child7</div>
<div class="child">Child8</div>
</div>
.parent {width:100%}
.parent div {width:100px; margin:2px;}
Edit:
Maybe I didn't explain clearly what i want...so
There can be more than 8 children.....but always an even number (10,12,14 etc)
A div with an even number must be always under his preceding odd div (2 under 1, 4 under 3....8 under 7, 10 under 9)
When parent's width is not enough to hold pairs of childer: it expands its height (like starts a new line)
Edit2:
The correct result is here:
http://jsfiddle.net/97ZpN/3/
but in this solution i had to put every pair of divs into a sub-container. Is it posiible to do it with the original html?
hope it will help you
.parent {width:100%}
.parent div {float:left; margin:2px;width:30%}
.parent div.child:nth-child(7),.parent div.child:nth-child(8){
float:none;
clear:both;
}
demo: http://jsfiddle.net/97ZpN/
Explanation:
.parent div {float:left; margin:2px;width:30%}
This line in the CSS will make all the child elements to float towards the left. So the elements will automatically stack one after other.
.parent div.child:nth-child(7),.parent div.child:nth-child(8){
float:none;
clear:both;
}
The clear:both does the trick here. clear:both means there cannot be any elements on the left or right side of the referenced element.
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/
This is a tricky question, but I will do my best to ask it:
I have a middle column of content and I want to add columns to the left and right of it, but I want them to "hug" the middle column. How can I center the middle column always and have the other two columns "hug" it?
The columns have a fixed width of 750px and basically when the viewport is maximized it should be something like this on a big monitor:
-------------------------------------
| | | | | |
| | | | | |
| | left | mid | right | |
| | | | | |
| | | | | |
-------------------------------------
and when the window is not wide enough, the left and right columns should get cut-off, but the middle column should still be centered and visible (assuming they don't make it too small horizontally):
-------------
| | | |
| | | |
le|ft | mid | ri|ght
| | | |
| | | |
-------------
Where "le" and "ght" are off-screen and not visible in the viewport.
I'm interested in any ways of accomplishing this. Currently I'm using
margin-left: auto;
margin-right: auto;
to center the middle column, but if there are ways to accomplish this without that, by all means =)
Thanks for reading this tricky question. I hope I got my idea across.
(If you can think of a better question title, feel free to edit it. I wasn't sure what to put)
P.S. Each column is actually made up of a few divs itself, (blocks that make up a column), I'm not sure if that makes the problem any easier to solve, or if that totally changes the problem...
Something like this ? http://jsfiddle.net/ndtLX/
i'm using an absolute positioned div above 2 floated divs, each large 50% of the container.
the problem is that on the left and right columns, the off-screen happen on the other side, and not on the same side as you asked...
You could also try floats to see if that gives you what you want
.divLeftCol
{
float: left;
}
.divRightCol
{
float: right;
}
<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>
I'm usually a Web technologies enthusiast, and I'm all for the no-tables-design thing, but right now, it's somewhat pissing me off. :/
I'm trying to achieve something that would have been extremely easy with tables, but that seems overly complex/impossible using floating elements. Look at the following:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
+-----------------+
Where #info has a fixed width, and must be floating right to #contents. #contents should take whatever's left of the width.
In the simple design where both #contents and #info are present, this isn't too complex. They are both fixed-width, have the float:left property, and fit very well.
However, on certain pages, #info won't be present. When it's the case, obviously, #contents doesn't scale to fit all the page.
The most obvious solution was to give #contents no fixed width so it'd scale, and change #info to be float:right. Past the minor other changes it required, it didn't have exactly the desired behavior, since it breaks the column-like layout when #contents is taller than #info:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
| +---------+
| |
+---------------------------+
Even worse, inside #contents, there are other <div>s with the border-bottom property set, and the border passes right through #info too in the following fashion:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------|-|-------|
| | +-------+
| +---------+
| |
+---------------------------+
So, considering all this, how can I give #info a fixed width, have it float to the right of #contents, but keep the column-like design and have #contents occupy the whole screen when #info isn't there, all of this making sure there are no visual artifacts, and without resorting to more than one stylesheet?
This would be the desired result on a page where both #contents and #info are present:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------| | |
| | +-------+
|-----------------|
| |
+-----------------+
And this is the desired result on a page where only #contents is present:
+---------------------------+
| #contents |
|---------------------------|
| |
|---------------------------|
| |
+---------------------------+
I hope this wasn't too confusing. I'm out of brain power.
Float your #content div too, it stops it from leaking like you're having, and it will fill the entire page when #info is gone. If when you dont have #info you can change #content somehow, #content could have a position relative and some right padding, with a position absolute in #info to fill its place.
I emailed my web teacher about it, and the answer is quite simple. It doesn't work with Internet Explorer (at least version 6), but it degrades nicely for my case.
With #info set to float:right, it suffices to have #contents set with the property overflow:hidden. And voilà.