Looking for a solution where I can change the height of a div based on the total height of three divs (One of which is variable based on content).
The Green Div will change height based on content. The yellow divs don't. I would like the height of the blue div to change based on the total height of the three left divs. I'm trying to get the top and bottom of all the divs to match up.
Jquery is a good option for my site, I'm just not sure how I would set this up.
Thanks for any help.
Play resizing the textarea:
http://jsfiddle.net/coma/dxpB2/
div.box {
position: relative;
padding: 0 110px 0 0;
}
div.fixed {
height: 50px;
background-color: #FFF601;
}
div.variable {
margin: 10px 0;
background-color: #00FF0D;
}
div.lateral {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100px;
background-color: #9699FF;
}
Firstly to add jquery you can just add this line to your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Or you can download the actual file and reference it correctly.
Now you are saying the green div will adjust based on content. After you set the content inside the div you should be setting the blue divs height.
$("#blue").height($("#yellow1").height() + $("#green").height() + $("#yellow2").height());
I can think of two and a half pure CSS solutions.
First solution requires to wrap all four div's in a container element with position: relative set to it.
Then the blue div can be positioned absolutely and forced to inherit the containers/wrappers height (which comes from the total height of the yellow and green div's) like so:
position: absolute;
top: 0;
right: 0;
bottom: 0;
The width of the blue div can be set explicitly, or with left, depending on how responsive the layout needs to be. And the horizontal space taken up by the blue div can be compensated on the wrapper with padding-right.
But no-one really wants extra DOM elements to achieve proper layout, do they.
Another option would be to set position: relative on the green div and place the blue div as a child of the green div in the DOM. Then position the blue div so:
position: absolute;
left: 100%;
top: -x; /* Whatever is the height of the top yellow div and margin between*/
bottom: x; /* Whatever is the height of the bottom yellow div and margin between */
width: x; /* Set explicitly for example */
This is possible due to the fact that yellow div's are of fixed height.
And extending it further, the entire blue div can be accomplished by the ::after pseudo element on the green div (same CSS applies as for the second solution), but it's suitability depends on what the contents of the blue div need to be.
I created a JS fiddle for the problem: http://jsfiddle.net/GgPJq/
Every time you click on the Green Text it doubles.
This gets you to where you need to be
jQuery(".blue").css("height", jQuery("#left").outerHeight());
Basically every time green expands the line above changes the style to match.
Related
I've got a <div id="mydiv"> with margin-left: 0px.
But sometimes (the page is dynamically generated) that this <div> is placed within another <div> that has a positive margin-left value.
This way #mydiv will have the margin of the container and not 0.
Is there a way to set
margin-left: 0px (relative to the body margin)
or
margin-left: -(sum of container margins)?
If your div is inside another one, the boundaries for that div are limited to it's container div.
You can break out of it by putting position: absolute; on the div you want to position differently. Then you should put a position: relative; on the container it should be relatively positioned to. Then you can use a negative margin-left.
use:
.mydiv{
position: absolute;
left : 0;
}
By using an absolute position and setting left to 0 your div will always be aligned with the left side of the containing element with no margin.
Use CSS positioning property and align the div's respectively.
For Example
You have a <div class="wrapper"> style this with position:relative
And for the inside <div class="mydiv"> style with position: absolute; left: 0; or left: 50%.
The main point is positioning:
position: fixed; will position the div relative to the browser window
position: relative; will position it relative to its normal position
position: absolute; will position it relative to the first parent element that has a position other than static (so it is not really absolute after all)
check http://www.w3schools.com/css/css_positioning.asp
You can achieve it with positions like relative and absolute.
You just need one top parent above all div.
I have created following example. It will help you to achieve what you need.
[Example](http://jsfiddle.net/dhavalsolanki/tjv5e1tn/)
Outline position becomes wrong if I applay resizable function on a div.
The ui-resizable-handle-s (shown gray in demo) expands the outline (red) though their positions are set to absolute.
How can I fix it? The problem appears only in FF.
Take a look at the demo.
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100 % ;
bottom: -5px;
left: 0;
}
This css rule binds the ui-resizable-s size to its parent size.
width:100%
bottom:-5px;
left:0;
These 3 mean:
Have the full width of the parent
Top edge stays 5px bellow the parents bottom edge on y-axis
Left edge stay on 0 from parents left edge on x-axis
With those 3 together it will always fallow parent on resizeing and moreover they do work exactly beacause position is absolute
Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
​UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }
I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.