The situation:
There a collapsible advanced search box. It is made up of a search box div that contains a boxhead div and a boxbody div. Inside the boxbody div, there is a searchToggle div. When the user clicks "Show/Hide", the display style property of the searchToggle div is toggled between block and none. (The search fields are hidden and the search boxbody gets much smaller).
The 2 background-images for the body of the search box are set via the css of the searchBox div and the boxbody div. In IE7, when the searchToggle div is hidden, the background-image from the searchBox div extends on the left more than it should (see Here). It shows up correctly when the display of the searchToggle div is block (see
Here). Everything show up correctly, in both cases, in IE8 and FF.
The relevant HTML:
<div class="searchBox">
<div class="boxhead">
<h2></h2>
</div>
<div class="boxbody">
<div id="searchToggle" name="searchToggle">
</div>
</div>
</div>
The relevant CSS:
.searchBox {
margin: 0 auto;
width: 700px;
background: url(/images/myImageRight-r.gif) no-repeat bottom right;
font-size: 100%;
text-align: left;
overflow: hidden;
}
.boxbody {
margin: 0;
padding: 5px 30px 31px;
background-image: url(/images/myImageLeft.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
I added an empty div in boxbody before searchToggle. It fixed the problem.
Related
In my code I am trying to add a external border frame to the pdf, but when I do so, the content of my pdf breaks in between and continue in second page. To overcome that Issue I used page-break-inside:avoid; property on parent div. But this resulted in a new strange issue, its keeping the first page blank (without border) and adding the whole content to second page (With border) of pdf.
No way for me to understand what I am doing wrong.
I am detailing dummy code snippet below -
<style type="text/css">
#page { margin: 0px; }
body { margin: 0px; }
html { margin: 0px;}
.back-img
{
background: url('ImageURL');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
width:100%;
height:100%;
}
</style>
<div style="page-break-inside:avoid;" class="back-img">
<div style="text-align: center;">
<h1>Heading Text</h1>
<br>
<img src="ImgURL" height="100">
<br><br>
Some Text Here
<br>
Some Text Here.. Some text here..
<br>
Some Text Here
<br><br>
Some Text Here
<br><br>
3-4 lines of paragraph here
<br><br>
<img src="ImgURL" height="50">
<br>
Some text Here
<br>
Some Text Here
<br>
Some Text Here
</div>
</div>
Dompdf version is 0.7.0
PHP version is 7.0.18
Your help is much appreciated.
This is probably because you set the width and height of the container div to 100%. Dompdf doesn't do the best job flowing elements that are bumping up against the margins of the page. You have a few options to try to address the issuue:
Set the height and width of the container to be a bit less than the containing page. This is easier if you know the page dimensions in PT and can specify specific lengths for the container dimensions.
Style the container as a fixed-position element. It won't affect the document flow and will apply to all generated pages. Simply put the margins on the page and apply negative values to the border element.
For that latter try something like:
<style type="text/css">
#page { margin: 100px; }
.back-img
{
position: fixed;
background: url('ImageURL');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
top: -50px;
right: -50px;
bottom: -50px
left: -50px;
}
</style>
<div class="back-img"></div>
<div style="text-align: center;">...</div>
I've had trouble with this over the years.
A solution that seems to work is make sure the first item is
page-break-inside: auto
on the first element, and then
page-break-inside: avoid
On any elements that follow
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.
I have 2 divs inside a container, Each of the inside divs are floated to the left and right, I want to make 2 columns for data inside the main content div.
Currently, text leaks out the bottom of content-left and content-right, even though they are contained within content.
Here is a jsfiddle
<div id="content">
<div id="content-left">I want to put content in here<br/><br/><br/>This is outside? why? </div>
<div id="content-right">and more in here</div>
Maybe other content here, inside the content
</div>
And the CSS
#content-left{
width: 50%;
border: 1px dotted #aaa;
float: left;
}
#content-right{
width: 49%;
float: right;
border: 1px dotted #aaa;
}
#content{
background-color: #eee;
width: 95%; /* Width of Main Content Div, % for Fluid*/
height: auto;
max-width: 1350px; /*Max width, To wide on big monitor*/
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}
Also, any tips about floating items would be great and might earn reps if I find them useful, I thought I had it mastered but obviously not! :P
You just need to add a clearing br inside the last div
Maybe other content here, but this should be below the 2 above divs in the rendered view.
<br style="clear:both;" />
</div>
http://jsfiddle.net/jasongennaro/sahbz/9/
This is happening because the floated elements are taken out of the document flow.
Currently, text leaks out the bottom of content-left and
content-right, even though they are contained within content.
You need to "clear/contain your floats", more information here: http://www.ejeliot.com/blog/59
One simple way to do that is to add overflow: hidden to #content.
See: http://jsfiddle.net/sahbz/8/
Pure CSS
.content:after {
clear: both;
content: '';
display: block;
}
Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link.
I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.
HTML Code:
<div class ="main-div">
<div class = "wrapper">
<div class ="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div class ="second-div">
//this only appears after clicking on a link
<form>
<textarea>
</textarea>
</form>
</div>
</div>
</div>
CSS:
div.wrapper {
width:inherit;
float:left;
bottom:6px;
position:absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div {
padding-top: 2px
}
div.main-div{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
padding:8px 13px 4px 13px;
min-height:61px;
position:relative;
}
Thanks in advance for any help.
I think the solution entails doing the following. Have a wrapper div:
<div id="my_wrapper">
content
</div>
Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.
<div id="my_wrapper">
<div id="visible_item">Item</div>
<div id="may_become_visible">Not Visible Now Item</div>
</div>
Then you can show/hide as necessary and position the inside content correctly.
Ok, with you updated question I believe I've created what you're looking for with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
HTML
{
margin: 0px;
padding: 0px;
height: 100%;
}
BODY
{
margin: 0px;
padding: 0px;
height: 100%;
}
div.first-div
{
width: inherit;
float: left;
bottom: 60px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div
{
display: none;
position: absolute;
float: left;
bottom: 0px;
}
div.main-div
{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
min-height:61px;
position:relative;
float: left;
height: 100%;
}
</style>
<div class="main-div">
<div id="firDiv" class="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div id="secDiv" class="second-div">
//this only appears after clicking on a link
<form>
<textarea></textarea>
</form>
</div>
this is my content
</div>
</body>
</html>
Now, what this does is absolute position both the first and second divs at the bottom of the page, positioned so that they don't overlap each other. If you don't like the fact that the first div is up so high from the bottom of the page, you can modify the first-div style as such:
div.first-div
{
width: inherit;
float: left;
bottom: 20px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
and then update the link to
<span>my link</span>
Basically, what you're doing there is changing the first div to be closer to the bottom of the page but then moving it when the link is clicked so that there's more room for the second div.
It's not solving the underlying issue of displaying a relative positioned div under an absolutely positioned div, but hopefully is resolves your specific problem.
Just a guess, but have you tried adding the style clear: both to the second div? I doubt it will help, but it might.
You can also try adding a top margin for the second div that is equal to the height of the first div. Basically, something like:
<div id="second-div" style="padding-top: 40px">
Where 40px is the height of the first div. The issue there is that you'd need to know what the height of the first div is and if it is variable then this approach will not help.