I was just wondering if someone can give me a hand, i've tried for 3 hours to solve this issue. I need to have the interface like on the picture by using grids, or anything.
The closest thing i can get is when everything displayed correctly except the second bottom grid. It usually gets below the white line (thats the starting point).
Could someone give me a tip on how to get around this problem.
You have minimum two options:
one is to make the grid elements absolutely positioned and give them top, left, right and bottom values. The parent element (grid container) should have "position:relative;" (or can be fixed or absolute, but in your case relative will make more sense).
Another option is to write markup like this:
<div class="col-xs-6">
<div class="col-xs-12">
one
</div>
<div class="col-xs-12">
two
</div>
</div>
<div class="col-xs-6">
three
</div>
Basically you wrap the two divs on the left into one parent div so the layout will not break. Just make sure the height of inner divs are 50% of the height of the right box.
Related
I have been trying so many different solutions to solve this problem without reaching any solution that actually works so I cant post any css (since its not working properly, so I dont even know if its the correct "way" to build further on anyway).
Case: One div with width 100% (its parent varies in size) with two children inside. The div should never exceed hight of one text line/ text row.
<div class="parent">
<div class="child">Text from left</div>
<div class="child">Text from right</div>
</div>
Goal: Make the children divs auto adjust to fit as much text as possible (on that one row) and if the childrens width together exceed its parent div width then hide the overflowing text in second child with ellipsis.
Is this possible with pure CSS? With script I sort it but not with only CSS.
Thanks (sorry for bad english).
First off, I know its a stretch that someone is really gonna completely solve this issue for me but even just pointing me in the right direction for what I need to learn to be able to do this is much appreciated. I'm a noob at CSS.
I want 3 divs of different heights and widths side by side and level at the top.
This is my html (its in react but I dont think that should affect how to do this. ClassName is class)
'''
<div className="AppMain">
<div className="SectionOne" />
<FishPole fishPoleImg={props.state.fishPoleImg} />
<FishButton handleClick={props.handleClick}/>
<FishCount fps={props.state.fps} fishCount={props.state.fishCount} />
<BaitShop />
<div />
<div className="SectionTwo">
<Structures />
</div>
<div className="SectionThree">
<StructureStore fishCount={props.state.fishCount}/>
</div>
</div>
</div>
I want the 3 divs under className="AppMain" to be side by side. SectionOne div will have a width of 270px,SectionTwo div to take up all all of the width that isn't taken up by the other two sections, and SectionThree div will have a width of 300px.
this is what i'm getting right now. (as you can see I cant even get them side by side, also this picture is very zoomed out so you can see everything)
Seeing your CSS code would be nice so we can help more, but possibly just adding vertical-align: top; to your elements CSS that you at the top would work.
I've been looking here for the answer to this and I've seen a lot of questions, but nothing that addresses what I am trying to accomplish.
Essentially I am creating a location finder with a map on the right and a list on the left. Currently there are over 18,000 locations that can be searched so the list of locations on the left could be long and it doesn't make much sense to have the list extend beyond the size of the map on the right.
The layout I am looking for is similar to this:
To keep things responsive, I would like the height of the columns in the second row to be set with a percentage and not a pixel amount. I don't necessarily care much about the height of the map on the right, it's going to be sized using the responsive embedding that bootstrap has, and it works fine, but the problem I am having is getting the list on the left to overflow instead of just growing.
I've tried adding the various sizing classes to the column with overflow-auto. I've tried wrapping the contents of the column in another div and applying those classes. Nothing seems to work correctly.
The closest I got was getting the contents of the column to overflow and show the scrollbar, but the parent div still maintained the original height of the div so there was a huge amount of whitespace at the bottom under the row.
This whole thing is making me absolutely insane! I can't believe that something like this could be so difficult. The sizing classes examples seem to show what I'm looking for, but they aren't working in practice.
At the moment, this is what I have: https://codepen.io/zachattack05/pen/aeLmmv
--------------------------- UPDATE ---------------------------
After trying Zim's suggestion, the page is rendering the scrollbar correctly, but it appears to be much bigger than the 25% that's expected.
Here's a fullsize screenshot of the outcome and the row, despite having h-25 set, it appears to be 75% of the screen at least.
A better representation of what I am looking for might be something like this, but not to scale. The map area would be 25% of the height of the page. Essentially, the map area is sandwiched between some other rows. and then a footer at the bottom of the page. I don't want the map and the scrolling div to stretch all the way to the bottom of the screen, that's way too tall.
There have been other questions on this. Flexbox items are equal height and will always grow to the height of the tallest column. If you want to limit the height of one column, so that the other one scrolls, use an inner position:absolute element...
https://codeply.com/go/kYFBFBc28l
<div id="PanelLocationFinderContent" class="row flex-grow-1 position-relative">
<div id="locationlist" class="col-sm-4 overflow-auto bg-info">
<div class="position-absolute">
<p>text</p>
<p>text</p>
..
<p>text</p>
<p>text</p>
</div>
</div>
<div class="col-sm-8 bg-warning">
<div class="embed-responsive position-static">
<div class="embed-responsive-item embed-responsive-1by1 bg-secondary">
<div id="map" class="bg-success h-100">MAP CONTENT WILL BE HERE</div>
</div>
</div>
</div>
</div>
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats