Im trying to have a page widen as the div gets wider. Im using C# , win forms and jquery. I have a repeater inside a div and each repeater item has a div with a set width and height set to 100%. I have all the divs set to float left. in chrome the page gets wider but in ie7, 8, 9 and FF the page doesnt get wider. currently we are in a process of moving our site over to use .less. the importance of this is that the page has a set width. In our instance we need to have the page grow wider.
Ive looked at setting the divs to display inline-block but that leaves white spaces between the divs. Ive seen a few ways around this by giving a negative margin or how the divs are arranged in the markup but Im not really a fan.
If you go to jsfiddle with the follow parameters i have an example. Im on mt tablet and for some reason i cant add a link.
/brad8118/7Wf2j/
<div id="outer">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>
#outer{
Height:30px;
Border: 1px solid black;
}
div{
Float: left;
}
.inner{
border: 1px solid red;
Background-color: green;
Width: 20px;
Height: 100%;
}
The inner divs are the ones created by the repeater.
Thanks
you can try something like this
jQuery extension:
(function ($) {
//calculates the total width of the elements selected
$.fn.sumWidth = function () {
var sum = 0;
this.each(function () {
sum += $(this).width();
});
return sum;
};
})(jQuery);
then you can use it like this:
$(function(){$('#outer').width($('#outer .inner').sumWidth());});
this will then set the outer div width to the total width of the inner div's width
Related
I have a page with 2 divs. As I decrease the height of the browser window, I want the first div to shrink (and scrollbars to appear on it), while the second div should keep it's height.
Is it possible to implement this logic with pure CSS?
<div class="shrinkit">
..many lines of text..
</div>
<div class="noscroll">
..many lines of text..
</div>
<style>
.shrinkit {
background-color: blue;
}
.noscroll {
background-color: green;
}
</style>
Just give the first div height:auto; and to the second div, give the height you want e.g height:200px
I have a table that needs to be transformed into CSS-based layout, because of responsive-design requirements:
<table>
<tr><td>minimal width</td><td width="100%">maximum width</td></tr>
</table>
Is it possible to create two div s that replace the two td s in the above example?
Unfortunately, the answers to this question is not appropriate, because the first answer uses a fixed width for the left column and the in the second answer any 100% width-element on the right side causes the right div to slide under the left one. I need the same behavior as the table: Use the maximum available width, keep on the right side and use horizontal scrolling if not enough space is available.
Is it possible to do?
Sure, like this:
div {
display:table-cell;
border:1px solid #999;
}
#b {
width:100%;
}
<div id="a">
a
</div>
<div id="b">
b
</div>
Try this code in your window for your own results. When I run this in snippets, it functions correctly.
The div id=one has a fixed 100px width. The max-width for div id=two is decided in the jQuery in which it gets the width of the window you currently are using, and it subtracts the amount of the fixed width of the div id=one.
The div that encompasses them all has a flex display to erase the blank space that generally shows up between divs, which adds pixels and would make the 100% - 100px width still appear on the line below because it would be too big.
$("#two").css("max-width", ($(window).width() - 100) + "px");
#one {
display:inline-block;
width: 100px;
border: 2px solid black;
}
#two {
display:inline-block;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:flex">
<div id="one">stuff</div><div id="two">more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff</div>
</div>
I want to create a header with 2 divs in it. The left div needs to be the same height as the right one, but the right one can scale based on its contents.
The left div's contents need to be vertically aligned to the middle.
I tried something like this:
<header>
<div id="test1">
<div>LOGO</div>
</div>
<div id="test2">
<h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1>
</div>
</header>
Use display: table-cell;
Working Demo
Edit:
In case if you want jQuery Solution it works on all browsers
You can fake this using overflow, padding and margins. It's completely cross browser compatible and doesn't need any JavaScript or anything. Just CSS. For example:
.header {
overflow: hidden;
}
.test {
background: red;
padding-bottom: 2000px;
margin-bottom: -2000px;
float: left;
width: 100px;
margin-right: 20px;
}
DEMO
There is also always faux cols (using a background image) but this is a better method that doesn't need images.
If you don't mind a bit of javascript:
$(document).ready(function() {
setHeight($('#test1'), $('#test2'));
// When the window is resized the height might
// change depending on content. So to be safe
// we rerun the function
$(window).on(resize, function() {
setHeight($('#test1'), $('#test2'));
});
});
// sets height of element 1 to equal the height of element 2
function setHeight(elem1, elem2) {
var height = elem2.height()
elem1.css('height', height);
}
DEMO
display: flex;
in the parent container works for me
I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want to believe it is..
Let's say the wrapper width is 1000px.
Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..
Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?
Graphic of what I am trying to accomplish:
The very closest I could come up with was to use display: table; and table-cell. This creates the dynamic effect you're looking for, but I don't think you can get your desired effect without setting an explicit width to the center element.
HTML:
<div id="wrap">
<div id="left">
Left
</div>
<div id="center">
center
</div>
<div id="right">
Right
</div>
</div>
CSS:
#wrap
{
width: 1000px;
display: table;
}
#wrap div
{
display: table-cell;
border: 1px solid #000;
width: auto;
}
#center
{
padding: 0 30px;
text-align: center;
}
You can check out my attempt here, it has some buttons for you to see the different states, width on/off and add text etc. (the jQuery has nothing to do with the solution)
I think this is as close as you're going to get with pure CSS.
Good 'ole tables to the rescue:
http://jsfiddle.net/hgwdT/
Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:
http://jsfiddle.net/XXXdB/
The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.
I also confirmed that this solution works in IE8 and FF, in addition to Chrome.
This not the most elegant solution, but it works. I wanted to go the pure CSS route, but couldn't figure it out. Nice work, jblasco and Kyle Sevenoaks, on figuring that out!
Here is my jsFiddle demo. If you don't mind using a little JavaScript though (utilizing jQuery in my example):
HTML:
<div id="wrapper">
<div class="side"></div>
<div id="middle">One line of text.</div>
<div class="side"></div>
</div>
CSS:
#wrapper {
margin: 0 auto;
width: 1000px;
}
#wrapper div {
float: left;
height: 300px;
}
.side {
background: #ddd;
}
#middle {
background: #eee;
padding: 0 30px;
text-align: center;
}
JavaScript:
var adjustSize = function(){
// Declare vars
var wrapper = $('#wrapper'),
middle = $('#middle'),
totalWidth = wrapper.width(),
middleWidth = middle.width(),
middleOuterWidth = middle.outerWidth(),
remainingWidth = totalWidth - middleOuterWidth,
sideWidth;
if(remainingWidth % 2 === 0){
// Remaining width is even, divide by two
sideWidth = remainingWidth/2;
} else {
// Remaining width is odd, add 1 to middle to prevent a half pixel
middle.width(middleWidth+1);
sideWidth = (remainingWidth-1)/2;
}
// Adjust the side width
$('.side').width(sideWidth);
}
I need in the same HTML row to have 2 divs: one will stay the same width while the other's size will be increased once the web page is being increased by the end user.
So I defined one div and inside 2 divs like this:
<div>
<div style="float:left" width="20px">first div</div>
<div style="float:left" width="100%">first div</div>
</div>
However it does not work!
How can I create 2 divs in the same line that one will be fixed size and the other one relative?
Do I win?
Live Demo
Live Demo #2 (using classes and with support for more than one instance of this)
HTML:
<div id="divHolder">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
CSS:
#divHolder {
overflow: auto
}
#div1 {
float: left;
width: 20px;
background: #ccc
}
#div2 {
margin-left: 20px;
background: #888
}
Take a look at this: http://jsfiddle.net/Shaz/GaZYt/2/
The left box will change size depending how much horizontal space is left. The right box will always have a minimum and maximum width of 200px.
Try setting display:inline on the div elements. The default display value for a div is block (which causes them to appear on seperate lines). Here is an example on js fiddle
I believe you may need to use Javascript to handle this case.
$(window).resize(function() {
var $left = $('#left');
var $container = $('#container');
$right.width($container - $left);
});