I have two divs on a page with the same height position. I'm trying to make them expandable, allot like what goes on in the WordPress dashboard area:
Now i've got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.
any ideas how this is done?
I've been looking it up for the past hour but i cant find anything.
A link to a tutorial would be cool (good luck finding one).
EDIT:
Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/
do you see how the two divs side by side expand? the green and blue ones...
If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:
HTML:
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
CSS:
.column {
float: left;
width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }
Preview: http://jsfiddle.net/Wexcode/F7h2C/
NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.
Related
In the picture is what I am trying to achieve.
When resized, inner elements should stay as they are:
This is what I tried:
<div style="width:100%;text-align:center;">
<div style="width:80%;margin-left:auto;margin-right:auto;">
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
...
<div>
</div>
But when I resize it, it get like 2 in a row, or 5 in a row, depending on how I resize the screen. Should be 3 all the time, centered. Width of inner elements not to be changed.
Add classes if you can. HTML:
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
...
<div>
</div>
...and CSS:
<style>
.one {width:100%;text-align:center;}
.two {width:Npx;margin: 0 auto;"}
.three {width:31%;margin:1% 10px;height:100px;float:left;box-sizing:border-box;}
.two .three:nth-of-type(3n + 1) {clear:left}
</style>
the inner div's need a fixed width (here, 1% on right and left) for a total width of 33%. Fixing height makes this work for variable content, otherwise, it looks off. The "nth-of-type) selector is a failsafe in case you can't use a fixed height.
Elaborating on using a fixed height, if you decide to parse your output with javascript to hide certain elements, they will still be counted in the "nth-child" iterative loop, which would break your layout. Using a fixed height and exact percentage widths should almost always work.
You'll note that there's 1% left over, but it's small enough not to be an issue.
EDIT:
Edited to add box-sizing:border-box;. Setting the box-sizing to border-box will include any added padding or border thickness to size, because if you add padding without it, your layout will break.
EDIT 2:
Reviewing OP's question, there is a requirement for the inner content to maintain a fixed width. The only way to do that is to declare a fixed with for .two or .three. Declaring a fixed width for .three will not center the content without additional css manipulation, so add a fixed width to .two.
Please note that a fixed width is a terrible idea for rendering in mobile, if your application needs that. I would suggest using a media query as follows, and swapping to the more popular two column layout for mobile:
<style>
#media screen and (max-width: 768px) { /* or whatever width... */
.two {width:auto;margin:auto;}
.three {width:46%;margin:2% 10px;}
.two .three:nth-of-type(3n + 1) {clear:none} /*cancels above */
.two .three:nth-of-type(odd) {clear:left} /* every two, clear left */
}
</style>
This will get you on the right track....
I'm trying to understand how to put two div's next to eachother inside a wrapper and have them both column div's to match heights at all times, even if one has more content than the other, all without applying a strict height to the column. I've tried using height:100% and doesn't seem to work, here is the code/fiddle to show what I mean. Does anyone know what I am talking about and how to get this working?
<div class="wrapper">
<div class="left"><img src="http://i.stack.imgur.com/Sv4BC.png"/></div>
<div class="right">
<div class="stretch">
stretch to height: 100%
</div>
</div>
<div class="fix"></div>
</div>
CSS:
.wrapper{background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{float:left;padding:5px;background:#FFF;}
.fix{clear:both;}
.left img{width:200px;}
Fiddle: (The two columns should be identical)
https://jsfiddle.net/19zsdswt/1/
I think the problem is with trying to add a height: 100% to a div that is floated.
You could try using a table, table cell relationship, like this:
.wrapper{display: table; background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{display: table-cell; padding:5px;background:#FFF;}
/* .fix{clear:both;} */
.left img{width:200px;}
I have updated your fiddle here - https://jsfiddle.net/sfyt9skx/
I am working on this project: http://www.e-pedkelnes.beta.verskis.lt/
Actually what I have to do is to put a background without adding a class. The background has to be white with extensions for the menu and the footer element. It would be easy if it would be only an extension for the menu. Content is of different size and size depends on the elements in the screen. so, it is easy to put a background for the menu, but footer background will always be in a different position just because of the different sizing of the content. If you understood what I mean :), I would be grateful to get some help.
Within:
.foot-outer {
background: none repeat scroll 0 0 #E8E4E5;
border-top: medium none !important;
left: 2px;
padding-top: 15px;
}
I removed width and margin and that looked better. You should not have them set on the outer elements, only on the container elements.
Does that make sense?
EDIT:
Your HTML layout should be more like
<div class='header wrapper'>
<div class='header'>
</div>
</div>
<div class='content wrapper'>
<div class='content'>
</div>
</div>
<div class='footer wrapper'>
<div class='footer'>
</div>
</div>
Then apply backgrounds to the wrapper divs, and apply a centred width to the inner content divs.
This is my html:
<div class="head" style="height: 100px;"></div>
<div class="wrapper">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
css:
.col{
float: left;
width: 100px;
}
I'd like the three div.col have the same height, and the height is page-height - 100,
how to do that without JavaScript?(just css)
play with the fiddle: http://jsfiddle.net/mdDwY/
How about using absolute positioning and use top and bottom on the columns.
Have a look here: http://jsfiddle.net/JYnrp/4/
The other thing you could do is use any of the equal height techniques like the one linked by Sinan and put a padding-bottom on the body of 100px to keep the columns 100px away from the bottom.
One more faux solution is if the 3 columns have simple background colors, then giving the wrapper a 1px high strip image with the 3 background colors in it and repeat-y that and then the columns will be different heights but will appear to be the same height.
Matthew James Taylor's Equal Height Columns with Cross-Browser CSS is an old standby.
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):