I have the following sample code:
<style type="text/css">
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
margin-left:-218px;
margin-top:-110px;
}
</style>
<div class="div_class">
<iframe src="http://www.w3schools.com/" class="iframe_class" />
</div>
In the code above, a div encloses an iframe of which only a part (from position [x=218,y=110]) has to be displayed. As you can see, I have placed height:100% for iframe which means it takes the height of the div. This is where the problem starts. The iframe is cropped. ie. the iframe's right border and bottom border have moved with the repositioning.
What I want: Even after the repositioning of the iframe, I want the right border and the bottom border to coincide with the right border and bottom border of the div respectively. How do I do it?
Note:
http://www.w3schools.com/ is taken just as an example. In my actual code, the iframe source will be decided by a PHP script.
I cannot set the iframe height to 218+document_height_of_iframe_src because as I said the src is dynamically decided by a backend script. So document_height_of_iframe_src will be unknown to me. Same is the case with document_width_of_iframe_src.
I have to accomplish all this without using JavaScript.
Thanks in advance...
Margin and border styles aren't included in an element width/height. So they have their own layout space. To fix it, add a bottom padding to the iframe_class's container (the div_class) like this.
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
/*added to compensate iframe border (top+bottom)*/
padding-bottom:2px;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
/*removed. messed the layout.
margin-left:-218px;
margin-top:-110px;
*/
}
Related
I have a header that should stay at least as wide as the below div is or wider. Everything looks fine as the windows is larger than the content but when the window gets smaller so does the top div.
#top{
border:1px solid black;
height:200px;
width:100%;
}
#content{
margin:auto;
width:1000px;
height:600px;
border:1px solid red;
}
<body>
<div id="top"></div>
<div id="content"></div>
</body>
Any suggestions?
http://jsfiddle.net/Z242Y/
I believe your problem is with the fixed width you have on the content where as the top div has a percentage width, so to fix just change the content div to a percentage width that is a little smaller like I did, I set it to 80%
#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}
Here is your updated FIDDLE
Hope that helps.
When you give an element a width of 100% in CSS, you’re basically making this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.
Try setting the width of the #top using javascript.
var x = $('#content').width();
$('#top').width(x);
JS Fiddle
Firstly, you can wrap your html in a container as such:
<div id = "divContainer">
<div id="top"></div>
<div id="content"></div>
</div>
Then, you can give it a fixed width, so that it will decide the width of its contained elements. In this way, both the top and content div will always have the same width.
For that, you will need your CSS to be as such:
#divContainer {
width: 1000px;
}
#top {
border:1px solid black;
height:200px;
width:auto;
}
#content {
margin:auto;
height:600px;
border:1px solid red;
}
You can see it here: http://jsfiddle.net/G4L4V/
Note: In this approach, the two divs will always have the same width.
In case you want to enforce the 1000px width and still have the content width to be smaller than the top div, then you could make a slight adjustment in the #content class as such:
#content {
margin:auto;
width:90%;
height:600px;
border:1px solid red;
}
Div highlighting question
I have 2 divs stacked on top of each other inside a container.
Here is the behavior I want: when you mouseover the top div, nothing happens. when you mouse
over the bottom div, the top div background changes color, and the bottom div's background
changes a different color. In the sample code I tried, mousing over the container div makes
the top turn green and the bottom turn vlueviolet. I want a mouseover on the bottom to cause
this behavior, but I want a mouseover on the top to do nothing. I feel like I could get this
done in jQuery using a parent selector or something, but it seems like I should be able to
do this in pure CSS. Thanks!
Here is what I've tried, which of course doesn't work, but gives an idea of what I'm trying to do.
<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
I changed up your CSS a little bit. Basically to make it bigger.
The order is important here.
This is not perfect due to the outer div's border.
<style>
div {
border:1px dotted black;
font-family:Courier;
background:white;
}
div#top, div#bottom {
height: 200px;
width: 200px;
}
div#outer:hover #bottom:hover {
background:blueviolet;
}
div#outer:hover #top {
background:green;
}
div#outer #top:hover{
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
</style>
Is this what you're looking for?
div#outer:hover div#top:hover, div#bottom:hover{
background:white;
}
Alternatively, you could also use !important:
div#top:hover {
background: white !important;
}
I don't think you can do this... CSS selection only works one way, from parent to child or in cascade.... so you can only change the CSS of divs below another div.
For example look this jsFiddle: as you can see, only the bottom divs' style can change.
This code
div#fourth:hover ~ #first{
background:green;
}
doesn't work because the "first" div is above the "fourth" div...
Anyway, if you want to set the background of top div to white, you will see a rollover with the delay.
PS: Sorry for my bad English.
I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
I have been trying to make div the exact same size as an image, but I don't know the aspect ratio of the image and I wish the image to fit the entire height of the webpage.
I have some experimentation at jsfiddle using display:inline-block
http://jsfiddle.net/jxKqp/4/
and while it seems to look ok when the webpage is loaded in chrome, if the webpage is resized, it fails to conform properly.
In firefox it doesn't work at all. Perhaps there's a better way to go about constraining a div to an image?
Here's similar code inline
<!HTML>
<html>
<head>
<style type="text/css">
.background_image {
height:100%;
width:auto;
border: 5px solid #ff0000;
}
body {
overflow:hidden;
}
div.container {
position:relative;
display:inline-block;
border: 5px solid #00ff00;
}
div.inner {
position:absolute;
top:0;bottom:0;left:0;right:0;
border: 5px solid #0000ff;
border-style:groove;
z-index:2;
background:black;
color:white;
opacity:.5
}
</style>
</head>
<body>
<div class="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Henry_ford_1919.jpg/470px-Henry_ford_1919.jpg" class="background_image"/>
<div class="inner">
I want to be same size as the image
</div>
</div>
`
Take out all this stuff:
.background_image {
height:100%;
width:auto;
border: 5px solid #ff0000;
}
body {
overflow:hidden;
}
DEMO
If you want the div to adjust as you resize, I believe you will need JavaScript. You could easily use jQuery's resize() function to do what you're talking about.
I added the following code to your fiddle:
$(document).ready(function(){
$(window).resize(function(){
$('.inner').height($(window).height());
});
});
And that will resize the div to be the height of the window (which will also be the height of the image as you're defining it).
See new fiddle here: http://jsfiddle.net/jxKqp/7/
i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress).
(The 2 sidebars work fine with float. ) So i tried width:auto on the container.
But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.
Do you know how to fix this?
#container { /* the text */
overflow:auto;
width:auto;
position:relative;
float:left;
}
#primary { /* first sidebar */
position:relative;
border:1px solid red;
float:right;
width:250px;
}
#second { /* second sidebar */
border:1px solid red;
background:white;
width:250px;
height:auto;
float:right;
margin-left:15px;
}
Thanks
EDIT :
let's say i'm using this instead of the wordpress sidebars : i still can't manage to make it work, could someone have a look with this simple code? there're 2 boxes : the green one and the red one...
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div style="position:relative; width:700px; margin:0 auto;">
<div style="width:auto; border:1px solid green;">i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float. ) So i tried width:auto on the container.
But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</div>
<div style="width:20%; float:right; border:1px solid red;">blablabla</div>
</div>
</body>
</html>
A width:auto is the default value so it won't be doing anything other than what a DIV would do as standard, which is to fill the available width since it's a block level element. This changes when you float it and it will wrap its content so could be any width up to the maximum width.
I think the trouble you're running in to is mixing percentage widths and fixed widths. I can see what you're trying to do - have a fixed width sidebar (or two) and the rest of the page flexible. It was really easy to do this back in the table-based layout days but let's not go there!
Sounds like you want a fluid layout but with 2 fixed with columns. Might be worth having a read of this article to see if anything suits what you're trying to do: http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Use display:table on parent div. Then display:table-cell on the children. They will align the way they would in a table.
#container { /* the text */
overflow:auto;
width:auto;
position:relative;
// float:left;
display: table-cell;
vertical-align:top;
}
#primary { /* first sidebar */
position:relative;
border:1px solid red;
// float:right;
width:250px;
vertical-align:top;
}
#second { /* second sidebar */
border:1px solid red;
background:white;
width:250px;
height:auto;
// float:right;
margin-left:15px;
display: table-cell;
vertical-align:top;
}
Ok, i found it out : put the text at the end, use overflow:hidden and auto, and float right on the small container on the right, thanks for your answers.