I have a div element, that I essentially want to turn into a window (of sorts). Basically, within that div element is content that extends beyond the view port of the "window" (div element). Here's a picture of what I'm trying to accomplish:
Now, I tried creating a div element of a fixed size, and gave it overflow: hidden, then placed the larger bit of content within that. The problem is (and I've only tested this in chrome so far), that when one of the inner elements no longer fits 100% within the overflow area, it disappears.
To know what I mean, I've attached another picture:
Notice that the turquoise portion to the right is missing (sorry about the white spacing to the left of the yellow, that's just a bad crop job on my part).
Is this a solvable problem without doing something hackish (such as extending the width of the "window" box, then absolute positioning another box in the right portion to hide that new area)?
Edit The question has been answered, but here's the fiddle for everyone to see what I was trying to accomplish: http://jsfiddle.net/MRnL6/1/
Thanks!
I think I understand what you're getting at. I think your elements are dropping down to the next line because their parent container isn't holding them. Try creating a container inside your window to contain the elements with a width equal to all of its children. See this fiddle for example.
The HTML:
<div id="window">
<div id="container">
<div class="elem one"></div>
<div class="elem two"></div>
<div class="elem three"></div>
<div class="elem four"></div>
</div>
</div>
and the CSS:
#window {
height: 100px;
overflow: hidden;
width: 250px;
}
#container {
width: 400px;
}
.elem {
height: 100px;
float: left;
width: 100px;
}
.one {
background: #0f0;
}
.two {
background: #f0f;
}
.three {
background: #ff0;
}
.four {
background: #0ff;
}
If I understand you want to be able to scroll to the content? Try overflow:scroll.
I think you are trying to accomplish something like this.
Please see:
http://jsfiddle.net/UMJwT/2/
try adding a intermediatary
div
The easiest option is to restyle the inner portions so that they all fit instead of overflowing.
See this demo
#container{
width:400px;
height:100px;
border:5px solid gray;
margin:10px;
}
.test{
display:inline-block;
width:25%;
height:100%;
}
Related
This is my first question so I'll try my best to get my point across as coherently as I can.
Lets assume something like:
<div id="parent">
<div id="child1">shot text</div>
<div id="child2">very long text</div>
</div
What I'm asking is is there a way to "link/lock" #child2 width to #child1's width or #parent's so that #child2 never exceeds #child1's width.
Is there anyway, using only CSS, I can force #child2 (or #parent) to have the same width as #child1, without fixing #parent's and #child1's width?
The point is that I want to be able to edit the contents on the fly (like translations) of both #child1 and #child2 but as #child2 will always have more words it will always be wider.
PS: Don't forget, using only CSS, no JavaScript.
Edit: Done a fiddle https://jsfiddle.net/ricardojcmarques/seckdugj/5/
Basically what I need is the green box to be the same width as the orange box, without giving the orange box (nor the brown) any width. Using the width the browser needed to render it correctly.
So just Improvised on your suggestion, the key here is to set
#parent{
background: brown;
position: absolute;
left: 0;
height: 0;
margin: 0;
padding: 0;
}
Heres is a working JSfiddle
DEMO
A little bit of a hack but it might work.
<div id="parent">
<div id="child1">short text that will expand and expand
<div id="child2">very long text that will remain within the confines of child1
</div>
</div>
</div>
#parent {
position:absolute;
background-color:green;
padding:5px;
padding-bottom:0;
}
#child1 {
position:relative;
background-color:#fff;
}
#child2 {
position:absolute;
border:5px solid green;
border-top:none;
margin-left:-5px;
margin-right:-5px;
}
EDIT
Have a look at this one, it's a little closer to yours but I have to modify the list in order to nest child2. I don't know if you have a specific style you need to set to the parent div but if you do it will take some more thought.
Demo2
I'm trying to have a toolbar always aligned to the right within a DIV without adding any height. The problem I'm finding is making this work both when the box has 100% width and when the width is determined by content. The HTML looks something similar to this:
<div class="box">
<div class="title">
float right
</div>
<div class="toolbar">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
I managed to make it work in Firefox, but Chrome wraps the toolbar when there is not enough space for it instead of increasing the width of the container.
.box {
border: 1px solid #ccc;
display: inline-block;
margin: 5px 0 15px;
}
.title {
display: inline-block;
}
.toolbar {
background: #eee;
float: right;
margin-left: 25px;
}
I would like to find a single set of rules to achieve this regardless the width of the container, but I'm out of ideas unless I use some extra class to differentiate both cases. Also, I'm trying to avoid using overflow or clearfix because I don't want the toolbar to affect the height of the box.
In this fiddle I show all combinations I have tried: http://jsfiddle.net/omegak/c4y4t/2/
You can try this, This worked for me.
.title {
float:left;
}
See if this is the desired output
Updated the below css and added clearfix class to the parent div
.title {
float:left;
}
Add the following CSS and clear the floats on first Div.
.title {
float:left;
}
Here is the demo
I got it working in the end with a little hack.
I gave up on trying the title not to be float: left. Then, to prevent the box to have no height I added overflow: hidden to it. Finally, the hack consists on setting margin-bottom: -999px on the toolbar to prevent it from adding any extra height to the box.
Here is the solution: http://jsfiddle.net/c4y4t/8/
Disclaimer: I'm not the most experienced person when it comes to HTML, so this may be an obvious fix.
Here's my predicament: I'm working on a web page designed for smartphones and tablets, so the dimensions of the screen varies a lot. I have a div on the right side of my page which has a width of 60% and a height of 85%. Inside this there is a square image with width: 100% and another div with a few buttons that I would like to make scrollable. NOTE: I do not want to have the outermost of these two divs be scrollable, only the innermost one.
Because of this setup I can't know for sure where on the page the inner div begins, but I do know where it ends.
I looked through some old questions but I wasn't able to find anything too similar, but I did find a question where someone knows the size of the outermost div in a simplified version of the problem. I adapted the simplified HTML so that it represents my problem.
Here's the jsfiddle: http://jsfiddle.net/s9Zfx/8/
Basically, I need to make it so that everything stays inside the blue box, the green box stays as is, and the red box is scrollable and contains the yellow box.
Thanks.
I have done with some row of jquery
http://jsfiddle.net/s9Zfx/9/
<body>
<div id="div1">
<div id="image-container">
<img src=""></img>
</div>
<div id="div2">
<div id="div3">
<p>some scrollable</p>
<p>content here</p>
</div>
</div>
</div>
</body>
css
div{ display: table-cell;float:left;}
#div1 {
height: 500px;
width: 400px;
border:5px solid blue;
}
#div2 {
overflow:auto;
border:5px solid red;
height:100%;
width:100%;
}
#div3 {
height:1000px;
border:5px solid yellow;
white-space: nowrap;
width:100%;
}
#image-container {
width: 100%;
border:5px solid green;
}
jquery
var result1 = $("#image-container").height();
var result2 = $("#div1").height();
$("#div2").height(result2-result1);
or if you want all in one line
$("#div2").height($("#div1").height() - $("#image-container").height());
without jquery I think it's impossible. Hope this solution may help you
I have four div tags. One of them is .main div. The rest of the are inside .main with .sub classes. What I want is first to show 1st div tag inside .main and the rest will be placed on the right side of the first div tag but the overflow of the main div tag is hidden so that the other two div tags are not shown only the first is visible. I am trying to achieve this with this code. How can I achieve this?
.main {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
}
.sub {
width: 100%;
height: 300px;
float: left;
}
.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
Assuming I've understood you correctly, and you want to see all three sub divs, one on the left, and two on the right, the problem is that you've set the widths to 100%, so there is no space to have them floating next to each other.
You need to set their widths so that they don't take up the full width of the container, for example they can each be 50% wide.
You also need to set the heights of the two divs on the right so that their total height is the same as the div on the left if you want them to line up.
Update:
To make it so that only the left div is visible initially, I think it's best you add another wrapper div around the the sub divs like this:
<div class="main">
<div class="wrapper">
<div class="sub blue"></div>
<div class="sub green"></div>
<div class="sub orange"></div>
</div>
</div>
With a width set to 200%.
.wrapper {
width:200%;
}
Then when you want the right hand divs to become visible, you can slide them onto the screen by repositioning the wrapper div, either with a transform, relative position, or margin setting.
Updated fiddle example
I don't know why but i have found that if you have space below the first item in this situation it won't work as expected..
so make the height of sub match then it will work:
.sub {
width: 100%;
height: 500px;
float: left;
}
http://jsfiddle.net/Ex9EC/2/
probably this is totally wrong approach though so wait for someone who knows to comment maybe?
Also I think there might be something about how the position of the outer/container div has to be set (to relative,absolute or fixed) which is why i added that but it seems to work without it too:
http://jsfiddle.net/Ex9EC/3/
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.