I am trying to build the html with css styling schematically presented in the picture below:
I manage to position the inner div with the following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div style="background-color: yellow; width: 100px; height: 100px;
position: relative;">
<div style="background-color: gray; position: absolute;
top: 8px; left: 8px; right: 8px; bottom: 8px"></div>
</div>
</body>
</html>
but the problem is that it stops to work if I want the height of outer div to be dynamic. Removing height value hides outer div.
How that could be achieved under all conditions?
Is width 'W' known? Ah, it is somewhat irrelevant...
OK, you need to do something like this (assuming you position the outer div where you want it). :
<div style="float:left; background-color:yellow; width:100px;">
<div style="background-color:gray; margin:8px;">You need enough content here to push the width out far enough...</div>
</div>
You may need to place the outside div in a further outside div to get the positioning correct, but the outside div must have a the float variable (left or right - it doesn't matter).
You can add borders and padding etc to these divs to suit. The key to the whole process is the float value existing in the outer div.
Not really sure where you're going with this. But it seems you want to just have padding around the inner div?
<div style="background-color: yellow; width: 100px;
position: relative; padding: 8px">
<div style="background-color: gray;">Hello</div>
This way, the content of the inner div will alter the height of the outer div...
If you have only absolute position object[s] in Relative position object, you must fix height value of Relative position object.
Hint. You can change height value via javascript or define min-height(CSS 2+) property of relative position object.
Related
I need a hint on how to properly place inserted element:
The initial situation is that the target page lists items in a grid of square tiles, where tiles reflow as the viewport width changes.
What I need is to transform the grid layout to something like tile layout providing more space for more details of each item (one item per line), where the original tile is aligned left and my rectangle element fills the remaining space of the viewport.
The tile is DIV wrapped inside enclosing DIV. Now I create a new SPAN and insert it after the inner DIV. However, the SPAN is placed not beside but below the inner DIV and it's width seems to be fixed to an unknown value. I've workaround it by adding position: relative to outer DIV and position: absolute to inner SPAN and setting it fixed width. It works eventually but as I notice the outer DIV doesn't expand if my SPAN overgrows it's area (it overflows) - ie. my SPAN seems to be excluded from the outer DIV though it's hierarchically inside it.
The question is how to organically insert the SPAN so that it's adopted by the ancestor, which then grows/shrinks as my element grows, and also inherit it's style.
<div style="position: relative;">
<div style="width:200px;">
..the original tile
</div>
<span style="position: absolute; left: 210px; top: 0px; margin-right: 10px; width: 500px;">
...here comes my content
</span>
</div>
Try the above code.. plz add the float concepts for this..
<div style="width: 500px; height: 150px; background-color: black;">
<div style="width: 150px; height: 150px; background-color: blue; float: left;"></div>
<div style="width: 350px; height: 150px; background-color: red; float: right;"></div>
</div>
I want to have two horizontal divs.
The width of the left div is 200px and is fixed.
The width of the right div is 600px by default and should be responsive. If user resizes the browser, the width of right div may decrease and scroll bar appears on right div.
I am trying to use float and overflow to do it. But I can't think of the right solution.
What should I do?
Use display:table and display:table-cell for getting better result.
<div class="main">
<div class="left">sdfsf</div>
<div class="right">sfsdfdsfsfdsfds</div>
</div>
.main{display:table; width:100%;}
.left
{
display:table-cell;
min-width:200px;
width:200px;
border:1px solid red;
}
.right
{
display:table-cell;
width:auto;
border:1px solid green;
}
DEMO
Your request is a bit odd and can be done though not using purely CSS level 1 unfortunately. In order to have the elements "float" and have the second div overflow instead of the body element you'll have to use a combination of position and overflow.
Copy this to an (x)html file and resize the browser...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>
<body style="overflow: hidden">
<div style="overflow: auto; max-width: 800px;">
<div style="background-color: #ff0; height: 200px; width: 200px; position: absolute; left: 0px; top: 0px;">left</div>
<div style="background-color: #0ff; height: 200px; overflow-x: auto; position: absolute; left: 200px; top: 0px; max-width: 600px;">
<div style="min-width: 800px;">right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, </div></div>
</div>
</body>
</html>
I highly recommend not using this even if your browser support requirement is extremely relaxed simply because using static layouts alone is really IE6 era sort of in-the-box-of-a-box type thinking. If it's for a client you really need to force-override them.
Just because I don't like display:table:
it is possible to achieve what you're looking for using flexbox.
The idea is to set the right element's width using width:100% and the left using width: 200px; min-width:200px.
I'm not sure what you mean regarding the overflow, but my solution has the right element's overflow set to scroll, and the contentn is put within another div whose width is 600px
Here's a demo.
I'm trying to set the size of 2 divs to fill the page with a 70 - 30 % ratio.
Without setting the size of the "html ,body" how can i get the divs to display to the correct height.
Currently it displays two single lines the height of the text. Thanks
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div style="overflow: hidden; clear: both;">
<div style="background-color: blue; height: 70%;">Top</div>
<div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>
</html>
You need to make the body and html elements have height:100%, and you need to give the outer div height: 100%.
CSS:
body, html { height: 100%}
<div style="overflow: hidden; clear: both; height: 100%">
<div style="background-color: blue; height: 70%;">Top</div>
...
You cannot do this with CSS, for a good reason. If you don't set a height to the body, it's height will become as high as it needs to be to accommodate all of its children. Now, if you use percentage-based units for your children's height, the children's height will be calculated based on the height of its parent.
So, the parent's height would depend on the height of its children, and its children's height would depend on the height of the parent - infinte loop!
P.S. Fred's method works, in case your concern about setting the height revolved around setting a static height. Setting the height to 100% might solve your dilemma.
You can add a position: absolute to the parent div and subsequently stretch it to achieve full width and height. Note that the width: 100% declarations are important to enforce block-level formatting context.
<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
<div style="background-color: blue; height: 70%; width: 100%;">Top</div>
<div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>
Here's the fiddle
Just note that this will remove this div from 'normal flow', and that sibling elements will be obscured/obscuring. The CSS 2.1 spec provides this advice:
...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
Unfortunately, you need to assign a fixed height to the DIVs parent in order for the 70% - 30% ratio to work.
One thing you can do is use JavaScript to get the height of the window, and then assign this value to the parent DIV. In this way, the percents will work, since it have a reference of how it should re-size.
Let's say I have two divs, one inside the other, like so:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="width:100%">
</div>
</div>
</body>
</html>
Right now, the inner div has a width of 100% of 50% of the screen size, or 50% of the screen size. If I were to change the inner div to position absolute, like this:
<html>
<body>
<div id="outer" style="width:50%">
<div id="inner" style="position:absolute;width:100%">
</div>
</div>
</body>
</html>
In this case the inner div takes up 100% of the screen space, because its position is set to absolute.
My question is this: Is there any way to maintain relative width of the inner div while its position is set to absolute?
Add position:relative to your outer div.
update: It works because positions in position: absolute are relative to the first parent that has some positioning (other than static). In this case there was no such container, so it uses the page.
Yes. Set outer to position: relative.
http://jsfiddle.net/57673/
.outer
{
width: 50%;
height: 200px;
position: relative;
border: 1px solid red;
}
.inner
{
width: 100%;
position: absolute;
height: 100%;
border: 1px solid blue;
}
I had an element that had to be position:absolute in a project and I found that setting width to max-content fixed that for me.
It seems to be well supported across modern browsers. Check this link for more info: Mozilla.org (max-content) .
I have been trying to get this right for days but I just can't.
My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit more content than the other two and the other two need to have buttons at the bottom (that are positioned so that their bottom edge is where the left column's content ends).
Here is an image that shows what I mean: http://img217.imageshack.us/img217/6400/49593032.png
I have tried the huge-padding-bottom-and-equally-huge-but-negative-margin-bottom-hack which works great until I try to move the buttons down. At first I tried to use absolute positioning on the button and position:relative on the container but since the container needs overflow: hidden to work the button will be hidden and placed at the bottom of the container (which is about 32767 pixels down due to the huge padding).
I also tried using the above hack while adding a second row which I put the buttons in. Besides the fact that the semantics of that don't make much sense, this method made it so that the content of the left column doesn't go all the way down. Since the hack required overflow: hidden attempts to use negative margins to push the second row up didn't work out either.
So I'm stuck here. Faux columns wouldn't help me and javascript is not an option. What would you do?
Use A List Apart's Holy Grail and position the buttons absolutely.
Don't really like it in this case, but at least one solution would be to use a table. The text height in the first column would force the height for the other cells, and you could use relative positioning inside the cells (with a div) to have the buttons at the bottom.
[removed code --- not 100% sure about your exact requirements]
You can use absolute positioning for your divs and then absolute position the buttons in them. Try this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { height: 100%; margin: 0; }
.col {
width: 33%;
position: absolute;
top: 0;
bottom: 0;
border: 1px solid #000;
background: blue;
position: absolute;
}
.left { left: 0; }
.mid { left: 33.33%; }
.right { left: 66.66%; }
.button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
</div>
<div class="col mid">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
<div class="col right">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
</body>
</html>