I have two divs: left and right. In the left there is a long text. In the right there are some annotations about the text (more divs). If the text of the left is longer than the annotations I'm like it. But when the annotations are bigger/longer then the left div, I want to make the right div's content overflow.
With other words: two divs without fix height, make overflow the right one.
The code is above or JSFiddle
<div id="container">
<div id="left">Some long-long text, allways to show</div>
<div id="right">Some divs not necessarily show all</div>
</div>
css:
#container {
background-color:white;
float:left;
}
#left {
width: 79%;
float:left;
}
#right {
width: 19%;
float:right;
overflow: hidden;
}
But it's not working. :(
As Jan suggested in his last comment, I think you need to use javascript or jQuery to accomplish this.
This question outlines an approach using javascript that was accepted by the OP, though the OP made no comments on his process of execution.
I've modified a js fiddle from this answer to a similar question.
It uses the following:
CSS
#main{
width:auto;
}
#one{
height:auto;
width:200px;
display:inline-block;
float:left;
}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;
}
div{
border:1px solid black;
}
Javascript
$(document).ready(function() {
$("#main").css("height",$("#one").height());
});
And I believe addresses your desired outcome.
You have to use overflow: hidden on #left, and not on #right.
Related
I have a wrapper having a series of divs inside it in the form of boxes.
Here are some problems that I am facing.
When I resize the window, the elements appear to be left aligned. How do I centrally align them.
Also, another problem is that the size of the divs slightly vary, which misaligns them.
Here is the Fiddle
.left_wrapper
{
max-width: 70%;
margin:0 auto;
float:left;
}
.boxa
{
background-color: #45e645;
display:inline;
position:relative;
left:4%;
float:left;
margin: 1% 1%;
padding:1%;
font-size: 85px;
text-align:center;
border:1px solid green;
}
<div class="left_wrapper" id="roll_nos">
<div id="box" class="boxa">01</div>
<div id="box" class="boxa">02</div>
<div id="box" class="boxa">03</div>
<div id="box" class="boxa">04</div>
.............
.............
.............
.............
</div>
As suggested, the question is NOT a duplicate of the above mentioned question, though the problem is (only) similar to the one presented there.
The accepted and most upvoted answer is not applicable in my case because I want the elements to automatically move to next line when the window is resized.
Thanks to '#Niet the Dark Absol', The flex-wrap solution is working to center align the elements, but a slight misalignment still lies there, the red line near #13 highlights it.
For your vary div size "red line aligment" I recommend add:
.boxa {
min-width: 85px;
}
Using this without float:left code I found okay from my PC And browser !
.left_wrapper
{
max-width: 70%;
margin:0 auto;
}
<div class="main">
<div class="content">
<div class="left_container">
</div>
</div>
</div>
In the code above, I have added a scroll to the left_container div.
But I want to hide it! Referring to other questions and answer, I found out to set overflow:hidden in the parent div class.
But still the scroll is not hidden in the child class?
CSS:
.content
{
background-color: white;
width:100%;
height:auto;
margin-top:10%;
position: absolute;
overflow: hidden;
}
.left_container
{
background-color:;
margin-left:5%;
margin-top:5%;
width:70%;
height:1000px;
overflow:auto;
}
Well I have also tried to set it hidden in the body! still not working..?
There is actually a simple way.
.left_container { overflow: hidden }
Now give left_container a child div and apply the following styles
.left_container-child {
height: 100%;
overflow-x: scroll;
width: 101%;
}
What this does is push the scrollbar out of sight.
You really want to check this over on differnet browsers and make sure you get the sweet spot that your content doesnt get cut off.
You can see a working example here (change the width on left_container-child to experiment pushing the scrollbar out).
Example
You have not used overflow:hidden in .left_container.
Try:
.left_container {
background-color:;
margin-left:5%;
margin-top:5%;
width:70%;
height:1000px;
overflow:hidden;
}
I think can't hide scroll bar for overflow hidden content.
you can try using scroll bar plugin http://nicescroll.areaaperta.com/demo.html
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
When I make a button I want to make a div that appears when I hover the button, though I have problems with it's width and it's position.
The problem can be seen below in the pictures and in the jsfiddle. When I make something absolute to the relative button, it looks like it's max-width becomes the width of the button. If the button is small, the hover div will also be small. How can I make a normal hover div with a width:auto?
http://jsfiddle.net/ghpc9fwk/
Just add a white-space: nowrap; attribute to prevent the text from wrapping on nearest occasions;)
Here's a working example: http://jsfiddle.net/1revewwm/
I 've also modified the bottom attribute
Not sure if this works for you but you could perhaps use ::before pseudo element to achieve such layout.
.alt-test{
background-color:blue;
display:inline-block;
margin:0;
padding:0;
position:relative;
margin-bottom:20px;
}
.alt-test::before{
content:"";
display:block;
height:10px;
width:10px;
background:red;
position:absolute;
left:0px;
top:-10px;
}
JSFIDDLE
Something like this?
<div class="button">
<div class="alt">Click here now!</div>
</div>
.button{
width:10px;
height:10px;
background-color:red;
}
.alt{
margin-top: 10px;
display: none;
background-color:blue;
width: auto;
white-space: nowrap;
}
.button:hover .alt{
display: inline-block;
}
Updated Fiddle
You can wrap your button and alt container in another div with position: relative;. Example fiddle
HTML:
<div class="wrapper">
<div class="button"></div>
<div class="alt">Click here now!</div>
</div>
CSS:
.wrapper {
position: relative;
}
.button{
width:10px;
height:10px;
background-color:red;
position:relative;
}
.alt{
position:absolute;
background-color:blue;
display: none;
}
.button:hover + .alt {
display: block;
}
A simple solution as noted before is to add white-space:nowrap to your alt/caption div, so it stretches until you insert some <br>
Additionally
I would recommend you not to use
bottom: -[something]px
but to use
top: 100%.
this way the button could be of variable height.
I modified your JSFiddle accordingly: http://jsfiddle.net/ghpc9fwk/3/
I know this sounds too simple but I am unable to place one div below the other div , and my code is
html:
<div id="gamediv"></div>
<div class="style"></div>
css:
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
After doing some ugly hack in my css & in my first div style i am able to place my desired div below first div , this is my css code:
.style{
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
position:absolute;
bottom:0px;
left:323px;
}
first div style property: <div id="gamediv" style="position:relative;"></div>
for now this solution is working but still i can't figure out why previous solutions didn't worked, any explanation regarding this is appreciated!!
This is beacuses your div will be displayed befault in line.
It will take all the space it has to dispay divs.
something you can do is to create another div to include the 2 you create and specifying a specific width:
<div id="container">
<div id="gamediv"></div>
<div class="style"></div>
</div>
Then add your style such as
#container{
width: 800px;
height: 200px;
}
.gamediv{
width:750px;
height:40px;
}
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
then you may want to align with float or centre with margin:auto; Try to to imagine div as boxes. if it help you may add
border:1px solid black;
this will draw the box and you will see what you are doing
add display: block; also in the stylesheet (for both div)
I'm fairly confident this is one of those things that has been discussed endlessly out there in the internet, but I can't find a solution.
I need to float 2 divs on the same line as a paragraph. Both of the divs have variable width and I need the paragraph to shrink into the available space and wrap its contents so that none of the elements themselves wrap off the line.
I've set up a JSFiddle
HTML here:
<div class="icon"></div>
<p>This is a really long line of text that will need to wrap</p>
<div class="count"></div>
CSS here:
.icon {float:left; width:50px; height:50px; background-color:#4d4d4d; margin-right:10px}
p {margin:0; overflow:auto; display:inline-block}
.count {float:right; width:250px; height:50px; background-color:#ff0000; margin-left:10px}
I know that I can use Javascript to achieve this, but I'd much rather find a pure CSS solution.
Thanks.
Floats do not shrink or expand to fit the available space. A floated item always uses the required space of any children.
That is what flexbox was invented for.
.flex-column-container {
flex: 1 auto 1;
}
Alternatively you could use a table layout.
Please check this fiddle if this is what you are looking for http://jsfiddle.net/Mohinder/dEwuU/
here is HTML
<div class="main">
<div class="w_200"></div>
<div class="middle"></div>
<div class="w_200"></div>
</div>
here is css
body,div{
margin:0px;
padding:0px;
}
.main {
width:100%;
text-align:center;
min-width:404px;
background:black;
float:left;
}
.w_200 {
width:200px;
background:red;
height:100px;
float:left;
}
.middle {
height:100px;
background:red;
float:left;
width: 49.2%;
width: -webkit-calc(100% - 404px);
width: -moz-calc(100% - 404px);
width: calc(100% - 404px);
margin:0px 2px;
}
Got it. If I change the paragraph to display:block instead of inline-block and change the order of the elements so that the paragraph is the last in the markup it works perfectly.