Here is the segment of css:
.imgdiv{
float:left;
padding:0px;
margin:0px 0px 10px 0px;
background-color:yellow;
width:55px;
height:68px;
}
.zheader{
padding:0px;
margin:0px 0px 0px 65px;
}
And here is the segment of html
<div>
<div class="imgdiv">
<!-- <img src="images/redzone.gif"> -->
</div>
<div class="zheader">
<h1>Red Zone = Danger</h1>
<h2>Everything is RED</h2>
</div>
<p></p>
</div>
I want to have the image floating to the left, and the h1/h2 floating to the right of the image. The HTML is rendered properly on the browser (Chrome, IE, etc)
Put the HTML thru xhtml2pdf, the imgdiv always takes up the whole parent div width and thus push the h1/h2 down below, regardless the width and height values. Comment out the image, then the pdf looks exactly how I want it to be.
My conclusion is the image must have some effect on how xhtml2pdf renders the image and the div contains the image.
What will be the proper way to handle my situation?
Thanks
Related
I'm trying to overlay two div elements, the underlying has a background the overlaying can not have one, since later there will be a background image in the back.
I want the underlying text to be cut off at the place where it is behind the overlaying div.
The only way I found was to set background-color: white; to the overlaying div, as mentioned this is not possible.
Any tip/solution how do I accomplish this?
<div style="background-color:red;z-index:1;overflow:hidden;position:absolute;left:262px;top:222px;width:191px;height:48px;">
This is a TEST text.
</div>
<div style="border:1px solid black;z-index:2;overflow:hidden;position:absolute;left:152px;top:177px;width:199px;height:156px;">
Top Element
</div>
Would this work for you? Basically, I've added a third div with the background color white that you can set it's display to none when the image goes into the lower div. This is mainly just a thought, it can probably be applied to the lower div instead.
<html>
<head>
<style>
#botDiv{
background-color:red;
z-index:1;
overflow:hidden;
position:absolute;
left:262px;
top:222px;
width:191px;
height:48px;
}
#topDiv{
border:1px solid black;
z-index:2;
overflow:hidden;
position:absolute;
left:152px;
top:177px;
width:199px;
height:156px;
}
#interSectingDiv{
background-color:#fff;
position:relative;
top:26px;
left:109px;
overflow:hidden;
width:191px;
height:48px;
display:block;
}
</style>
</head>
<body>
<div id="botDiv">
This is a TEST text.
</div>
<div id="topDiv">
Top Element
<div id="interSectingDiv"></div>
</div>
</body>
</html>
[ updated ]
Another thought, is that you can probably shorten the width of the lower div by the amount of space it consumes from the higher div and position it at the right edge of the higher div until the image goes in (you'll most likely have to use animation in your css that's triggered by some form of javascript).
I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
I created a wrapper div for my site to contain the entire contents of the body, but for some reason, I have extra white space above the wrapper div. I can't exactly pinpoint why this is happening; I put zero padding and zero margins for both the body and the wrapper div:
<body onload="init()" style="margin:0px; padding:0px;">
<div id="wrapper" style="background-color:#000000; margin:0px; padding:0px;">
<div id="pagecontent">
<nav id="navlogo" style="margin:10px;">Some Navigation Stuff
</nav></div></div></body>
(The Page Content Div holds all of the webpage's elements and centers them.)
I also have this CSS for the page content:
#pagecontent
{
margin: 0px auto;
width: 1044px;
box-shadow:inset 0px 0px 15px black;
background-color:#000000;
}
I tried using negative margins of -10px on the wrapper div, and that worked out; is that the only way to get rid of this white space?
<nav id="navlogo" style="margin:10px;">
This margin includes margin-top:10px - that is the issue.
margin:10px; = margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;
to get around this you could change it to:
margin:10px;margin-top:0;
or to make the navbar go to the top just change margin:10px; to padding:10px;
I have a rule like this:
body{border:1px solid gray;}
#middle{
float:left;
margin-left:3%;
margin-top:20px;
width:41%;
border-top:solid #aaaaaa 1px;
}
.message-content{
padding:0 10px 0 10px;
float:left;
}
My HTML is like:
<html>
<body>
<div id="middle">
<div class="message-content">Loris ipsidum</div>
<div class="message-content">Loris ipsidum</div>
<div id="clear"></div>
</div>
</body>
</html>
I tried to duplicate it in JSFiddle, but I wasn't able to. Basically, what's happening is, after I get many message-content divs, the border defined by the body rule is passed. It basically looks like there's a line right through the middle of the content. Any ideas?
I'll try to get a working example up.
Since your #middle elements are floating, they don't count in the height of the parent (in this case the body), so the body is only taking up the height of the window.
You don't appear to have defined a clear style for your #clear element. Even so, the clear element should be after, not inside, the floating element.
Hi,
I want to create a popup whose content will come from outside, which I want to put that content in a iframe tag of popup.I am not sure how much content will come,It will be either large data or small data. So what I want to achieve is, Popup width&height should be auto adjusted to content width and height,and if the content is too large(if it exceeds body width and height), content div tag must be auto scrolled....Is there a way to achieve...code is appreciated...
Here is my code,What I believe would work(But Its not giving proper output)
<style>
#irmNPopupContainer{
display:inline-block;
border:8px solid rgba(0,0,0,0.4);
border-radius:8px;
}
#irmNPopupHdr{
height:30px;
width:100%;
background:#e4e4e4;
}
#irmNPopupHdr span:first-child{
padding:0px 0px 0px 5px;
font-weight:bold;
color:#333333;
}
#irmNPopupHdr span:last-child{
position:absolute;
right:2px;
top:2px;
cursor:pointer;
}
#irmNPopupContent iframe{
width:100%;
height:100%;
}
</style>
<body>
<div id="irmNPopupContainer">
<div id="irmNPopupHdr"><span>Agreement Search</span><span><img src="badge_cancel_32.png"></span></div>
<div id="irmNPopupContent">
<iframe src="http://www.w3schools.com" frameborder=0>
</iframe>
</div>
</div>
</body>
Y don't you use table instead of divs?
Do you also want to set the iframe height and width? If yes then you need to use easyxdm plugin for resizing ifrmae here is a link for plugin(this will work for cross domain. If domains are same then there is no need for this plugin you can set the width and height by JS code.)
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/