I have to show 2 adjacent boxes, both have a dynamic content (rendered using angular). The Container must have the height of Box1. Box2s heigth may vary due to the dynamicity and it should not be higher as Box1. If higher a scroll should be shown.
I started with the following code using tables:
<table id="Container">
<tr>
<td valign="top" id="Box1">
<dynamic rendered html code/>
<td>
<td> <td>
<td valign="top" style="position: relative; id="Box2">
<div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
<dynamic rendered html code/>
</div>
<td>
</tr>
</table>
Unfortunately it does not work in IE, since (as I'v read on the web) position is not defined for tables (not HTML standard);
So I decided to switch to divs:
<div id="Container">
<div style="display: inline-block; vertical-align:top" id="Box1">
<dynamic rendered html code/>
<div>
<div style="display: inline-block;"> <div>
<div style="display: inline-block; vertical-align:top" id="Box2">
<dynamic rendered html code/>
<div>
</div>
Box1 should always wrap its content. Box2 should not be heigher than Box1, IF then scroll overflow.
Is it possible in CSS? No JQuery and no Javascript.
I believe you want #Box2's height equal to #Box1's height.
There is no way to align there height within the same parent. Therefore, I suggest you to wrap #Box2 with #Box1 like below.
<div id="Box1">
<div id="Box2">
</div>
</div>
And that you can set max-height: 100%; to #Box2 so that the maximum height of #Box2 will not be larger than #Box1.
Adding overflow-x: auto; to #Box2 can show scrollbar automatically when text overflow.
https://codepen.io/blackcityhenry/pen/LMVoZd
Related
consider the following code:
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>
Don't ask me why both #p1 and #p2 need an absolute position, they are part of a legacy component I can't change.
I expect #c to grow with the text until it reaches the max-width of 120px. However, how you can see in the example, the text breaks at every word.
This behavior appears only if I have 2 nested parent divs with position absolute. I tried to play with properties such as white-space and word-wrap with no success.
I'm really interested in finding out why such behavior occur. Does anybody has an answer?
Absolute positioned elements need width and height settings, otherwise they don't expand. Try to add some settings, for example this:
#p1, #p2 {
width: 400px;
height: 300px;
}
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>
I have this code:
#points{
width:25%;
background:#2a2a2a;
height:20px;
color:white;
z-index:2;
position:absolute;
}
#areas{
position:absolute;
color:white;
border-right:2px solid black;
height:120%;
}
<div class="container" style="width:100%">
<div class="scale" style="width:100%; position:relative;">
<div id="points" style="left:0; ">0</div>
<div id="points" style="left:25%;">25</div>
<div id="points" style="left:50%;">50</div>
<div id="points" style=" left:75%;">75</div>
<div id="points" style=" left:100%;">100</div>
<div id="points" style=" left:125%;">125</div>
<div id="points" style=" left:150%;">150</div>
</div>
<div class="area" style="width:100%; background:orange;">
<div id="areas" style="left:0;"></div>
<div id="areas" style="left:25%;"></div>
<div id="areas" style="left:50%;"></div>
<div id="areas" style="left:75%;"></div>
<div id="areas" style="left:100%;"></div>
<div id="areas" style="left:125%;"></div>
<div id="areas" style="left:150%;"></div>
<div id="areas" style="left:175%;"></div>
</div>
</div>
While scrolling to top and bottom, I would only like to scroll the area div; I don't want the scale div to hide from the container while scrolling.
I tried using position: fixed for the scale div, but it didn't fit correctly with the the scroll left, this case only display the 0 25 50 75, but each scale points are correspond to the area div tag so display the all div tag 0,25,50,.. 150 with these corresponding areas div tags
Is there any other way to do it without positon: fixed?
Working fiddle with postion: absolute. But the points divs are hidden from the container.
position: fixed. Left side div tags are not visible.
Do you want something like that ?
https://jsfiddle.net/qk37kson/ (Edited : added a little bit of JQuery to make the header move horizontally)
1) The id attribute has to be unique. That's why in JavaScript we have getElementById and getElementsByClassName.
From W3Schools :
http://www.w3schools.com/tags/att_global_id.asp
The id attribute specifies a unique id for an HTML element.
http://www.w3schools.com/tags/att_global_class.asp
The class attribute specifies one or more classnames for an element.
2) change
<div class="scale" style="width:100%; position:relative;">
to
<div id="scale" style="width:100%; position:fixed;">
3) then, in your CSS, add this :
#scale {
top:0px;
left:0px;
z-index:2;
}
Edit :
4) Finally, add some JQuery :
$(window).scroll(function(){
$('#scale').css('left','-'+$(window).scrollLeft()+'px');
});
You could keep .container's overflow-y to hidden and .area's overflow-y to scroll. Thereby the container would scroll .scale and .area along x but not y, but the .area will scroll along y within itself giving you your effect.
I've tried the solutions in other threads, but I'm at a loss.
I'd like two images, side by side, each one's width equal to 40% of the page width, and with 20px of margin between them, and the whole wazoo should be centered.
Diagrammed approximately:
| [img1 width:40%] 20px space [img2 width:40%] |
I've gotten very close, but nothing quite works.
Here's the closest I've gotten:
<!-- Starts centering with the addition of "width" to the div's style. -->
<div style="margin: 0 auto;">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20px;">
</div>
This code on JSFiddle: http://jsfiddle.net/98Se3/
It resolutely refuses to center without that div having a specified width. However, the width of the div can neither be set relative to the page width, or exactly in pixels, because it should be 40% + 20px + 40%.
What am I missing?
Just use text-align:center for the parent div:
<div style="text-align:center">
<img width="40%" src="http://bit.ly/1mlbOp6">
<img width="40%" src="http://bit.ly/1mlbOp6" style="margin-left: 20px;">
</div>
Check out this working fiddle
Are you looking for something like this fiddle
<!-- Starts working (approximately) with the addition of "width" to the div's style. -->
<div style="margin: 0 auto; width:100%">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;"><img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20%;">
</div>
Updated margin-left: 20%; instead of margin-left: 20px;
And there is no gap between <img ...><img ..>
<div style="text-align:center">...</div>
This way the content is centered, the div uses full width but unless it needs to be visible (border, background-color, ...) it does not visually matter.
That last part may be solved by setting a <span> around the images and style that.
Use text-align:center; instead margin:0 auto;
<div style="text-align:center;">
DEMO
Hi I have some html that looks like this:
<div id="wrapper" style="background-color: red;">
<div style="margin: 0px auto; width: 960px;">
Text here...
</div>
</div>
The wrapper-div doesn't fit the <body>, when I resize the browser window to be lower than 960px, the wrapper gets as small as the browser window size. I want to get the wrapper at least as wide as the content inside it. I really have a hard time figuring this one out. Any suggestions?
Set wrappers style to: min-width: 960px .. same as inner div
Set the width of upper div
<div id="wrapper" style="background-color: red; width: 960px;">
<div style="margin: 0px auto;">
Text here...
</div>
</div>
for a detailed description refer this
Lets see this layout:
<div style="float: left">
content1
</div>
<div style="float: left">
<table width="100%"><tr><td>dfsd</td></tr></table>
</div>
then the following happens: the table goes to new line, and will be as wide as the screen. But it should remain next to the previous div, and be as width as the 2nd div.
How to workaround this?
EDIT:
left column is fixed 200px width.
The 2nd column should be 100%
I think you mean that the 2nd column should be 100% of the remainder of the page, correct?
Still, it depends on exactly what you're trying to achieve. You could create a surrounding table, if that makes sense for your content:
<table class="table_surround">
<tr>
<td class="col1">content 1</td>
<td>(table here)</td>
</tr>
</table>
.table_surround { width:100%; }
.col1 { width:200px; }
Or you could use absolute positioning:
<div style="position:absolute; left:0; width:200px;" >content 1</div>
<div style="position:absolute; left:200px; right:0;" >table here</div>
Here's another good option:
Expand a div to take the remaining width
Give your DIVs some width... something like:
<div style="float: left; width: 25%;">
content1
</div>
<div style="float: left; width: 75%;">
<table width="100%"><tr><td>dfsd</td></tr></table>
</div>
By default, <div>s will be set to width: 100%; (bar default margins/padding) in CSS, you need to manually change it.
Floating left will do nothing when there's no space to fit the other elements.