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
Related
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
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
this is what I'm trying to achieve.
I already know positioning, centering and stuff. The problem I have here, and which I want to ask you guys, is: what's the best practise to have a centered div and everything inside it to be centered while having a single one's background color exceed to the full width of the page always keeping it centered?
It's a super common layout in fact, I just don't know what's the correct way of "thinking" it.
Should I think the layout as "I make a big box with 1280px width, center it with margin: 0 auto; and then do something special for that div's background - and only the background, content should stay in place - to exceed or should I make something like a class to center every single element the same way but repeating my code?
So basically, should be all inside a single box and that div exceed in the background only or it's actually better to center everything separately by repeating the code?
Keep in mind the site is not responsive and doesn't need to adapt/scale and also that the light grey area is also the "body" colore so the dark grey area is the only special case in the page that should exceed.
My suggestion:
I would create three basic containers for the full width support. Then nest content in it!
html, body{
padding: 0;
margin: 0;
border: 0; /*ie older versions*/
}
header {
background-color: antiquewhite;
}
section{
background-color: ActiveCaption;
}
footer{
background-color: aquamarine;
}
.inner-wrapper{
max-width: 300px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
height: 80px;
text-align: center;
}
section .inner-wrapper{
height: 200px;
}
<header>
<div class="inner-wrapper">
<div>some content</div>
</div>
</header>
<section>
<div class="inner-wrapper">
<div>some content</div>
</div>
</section>
<footer>
<div class="inner-wrapper">
<div>some content</div>
</div>
</footer>
This is a absolut basic but robust layout an i used it several times. It is very easy to make it responsive with media queries or fluid with percentage settings!
In my opinion you should give to the body or to a container div the background color property and that div to be full width and height then the div that is in the middle you should give a margin:0 auto; and a specific width, this is what I would do, but it depends on what you are trying to do, what is the most common way you do it in order to you to know to how to do it the same next time, faster.
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%;
}
I am trying to place a child div over the top of its parent div (including its content)
<div id="footer">
<div id="footer-container">
<div id="icon"></div>
</div>
</div>
#footer {
height:50px;
border-top:3px #666 solid;
margin-top:50px;
}
#footer-container {
height: 30px;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
}
#icon {
height:30px;
width:30px;
background-color:#666;
}
Now it works if the content of <div id="icon"> is text but if you place a background image in the div it does not. Is there any way to make this work? This maybe explains it better
http://jsfiddle.net/4QxL7/
EDIT
Apologies. It was working all along. I was using PNG's for the images which have 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
I just tried two methods and they both worked using an oversized image from my site...
<div id="footer">
<div id="footer-container">
<div id="icon"><img src="image url here" width=30 height=30/></div>
</div>
</div>
http://jsfiddle.net/ZkxSM/
and
#icon {
height:30px;
width:30px;
background-color:#666; /*unnecessary now probably...*/
background:url('image url here');
}
http://jsfiddle.net/b6QyX/ (image needs to be resized before hand for this to work maybe... or width and height can be set in the html of the div)
There's nothing actually wrong with your jsfiddle..
Apologies. It was working all along. I was using PNG's for the images which has 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help