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
Related
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>
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
I'm trying to stack a few divs vertically that have a "red" background which takes 100% of the page. Inside those divs i make 960px centered divs. What happens is very strange: if i resize my window to be less than 960px (for scrollbar to appear) - there is a gap at the right side of each stacked div. You can view live example here: http://jsfiddle.net/GLE7A/
Basic code:
<style type="text/css">
* { padding: 0; margin: 0; border: 0; }
.wmain { background: red; }
.w960 { margin: 0 auto; width: 960px; }
</style>
<div class="wmain">
<div class="w960">
test
</div>
</div>
<div class="wmain">
<div class="w960">
test
</div>
</div>
Solution is easy: just add min-width:960px; to the .wmain div to fix the problem
QUESTION: why does this strange behaviour happen in the first place? Does a fixed-width child somehow escapes normal flow like absolutely positioned divs or smth.?
Thanks for your thoughts
That occurs because you dont define any width for the wmain div that is what confusing the browsers.
I have two divs, inline. One displays a measurement, the other displays a unit value. The text in each is currently aligned correctly.
I would like to display a bar stretching across the top of the measurement value, but no further. Note: for various reasons, I can't use text-decoration: overline. Instead I am trying to display a background image behind the text, clipping to the width of the text (not the div).
I have tried using display:table; on the measurement div, and this works, but it has the affect of screwing up my div layout (the text is not aligned between the divs).
Here's some example html:
<div class="measurement">1234</div><div class="unit">mm</div>
Here's some example css:
.unit {
display:inline-block;
}
.measurement {
display:inline-block;
background-image:url(overline.png)
width:200px;
text-align: right;
}
Does anyone know of a way I can clip the background image to the width of the displayed text?
Just use a border instead of an image:
.measurement {
display:inline-block;
border-top:1px solid #000000
}
How about changing the divs to spans and wrapping the measurement span in a div to space it to the desired width?
HTML:
<div class="spacer"><span class="measurement">1234</span></div><span>mm</span>
CSS:
.spacer{
width:200px;
display: inline-block;
text-align: right;
}
.measurement {
background-image:url(overline.png);
}
See this jsFiddle for a working example.
(background-color should work the same as an image).
<style>
.header {
float:left;
width:50%;
border:1px solid black;
}
</style>
<div style="width:100%;">
<div class="header">Hello</div>
<div class="header">World</div>
</div>
I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?
The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.
Demo: http://jsfiddle.net/rfSMX/1/
You may run into the 100% combined width issue in IE.
Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide. Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.
Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.
Add an extra div inside the divs that need a border called header-inner.
<style>
.header {
float:left;
width:50%;
}
.header-inner {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div style="width:100%;">
<div class="header"><div class="header-inner">
Hello
</div></div>
<div class="header"><div class="header-inner">
World
</div></div>
</div>
This could work:
because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side