I created three tabs out of divs and put them along with a textbox into another div called window. I want window to encompass all of the content, have red background, and a blue border around it. The problem is that the tab divs appear to be overflowing their parent div (window) causing the background and border to fill a smaller area than should be filled.
I tried setting overflow:hidden on the window and this chopped off part of the tabs which I didn't want, however the border now went exactly around the content which is what I did want.
Also, I tried setting overflow:auto on the window, but this created a scroll bar which I don't want.
Is there a way to stop the child elements from overflowing or expand the window div to account for this overflow?
You can see the page I am trying to make here.
body {
background-color: #F79F94;
text-align: center;
}
.tab {
background-color: #F47564;
min-height: 50px;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.tab-right-line {
border-right-style: solid;
border-right-width: 1px;
border-right-color: #F79F94;
}
.tab-text {
color: white;
font-size: 14pt;
font-family: georgia;
}
#window {
border-color: blue;
border-style: solid;
border-width: 1px;
background-color: red;
display: inline-block;
}
<div id="window">
<div class="row">
<div class="col-xs-4 tab tab-right-line">
<h1 class="tab-text text-center">All</h1>
</div>
<div class="col-xs-4 tab tab-right-line">
<h1 class="tab-text text-center">Online</h1>
</div>
<div class="col-xs-4 tab">
<h1 class="tab-text text-center">Offline</h1>
</div>
</div>
<br>
<div class="row">
<input type='text' class='form-control' required>
</div>
</div>
Change this:
<div id="window">
to this:
<div class="container-fluid" id="window">
Here is the JSFiddle demo
Related
I'm trying to find a workaround to the weird CSS overflow behaviour describe in this answer:
If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.
I have a horizontally scrollable section with many card inside of it, I want each card to scale up when the user hover over it.
I started with a simple
.card:hover{
transform: scale(1.5);
}
that obviously resulted in a vertical scrollbar appearing on the horizontally scrollable section, for the rule described at the beginning.
So I tried modifying the position property to absolute on hover and also added a wrapper around the card to prevent other card from collapsing due to the previous element being removed from the document flow, this seems to work but also produces a very weird behaviour: if you scroll horizontally the hover effect kinda breaks, it only works if the mouse is positioned on an overlapping area between the card normal position and the hovered (absolute) position. Since the card gets absolutely positioned on hover, that position remains the same even if the user scrolls horizontally.
I'm trying to find a CSS/HTML only solution, if there is one.
The ideal would be to either have both overflow-y: visibile and overflow-x: scroll or to find a way to calculate the top, left values according to the scrolled position of the cards.
Here is a minimal example (also on jsfiddle):
.container-wrapper{
position: relative;
}
.container{
width: 100%;
display: flex;
overflow-x: scroll;
border: 1px solid orangered;
}
.wrapper{
flex: 0 0 calc( 100% / 5);
}
.card{
height: 100px;
margin: 0 0.5em;
background-color: blue;
}
.card:hover{
width: 200px;
position: absolute;
transform: scale(1.4);
}
/* color */
.red{
background-color: red;
}
.pink{
background-color: pink;
}
.yellow{
background: yellow;
}
.cyan{
background: cyan;
}
.green{
background: green;
}
<div class="container-wrapper">
<div class="container">
<div class="wrapper">
<div class="card red"></div>
</div>
<div class="wrapper">
<div class="card pink "></div>
</div>
<div class="wrapper">
<div class="card yellow"></div>
</div>
<div class="wrapper">
<div class="card cyan "></div>
</div>
<div class="wrapper">
<div class="card red"></div>
</div>
<div class="wrapper">
<div class="card green "></div>
</div>
</div>
</div>
Hope I've been clear, thank you all.
I had some css displayed for a div which was working, however since adding other elements and adding unrelated code the css is no longer applying to it's relative div.
#container
{
width: 100%;
height: 80%;
background-color: #ffffe6;
border-style: solid;
border: 2px, black;
border-radius: 25px;
padding-top: 15px;
padding-right: 15px;
margin: auto;
padding-left: 15px;
}
<div id="container">
<div id="functions"></div>
<div id="roll">
included elements
</div>
<div id="keyboard" class="center">
SOME PHP
</div>
</div><!--closing tag for keyboard div-->
</div><!--closing tag for container div-->
The css for the container code doesnt seem to be registering despite it working a few saves ago. I can not seem to work out why or how it now isnt picking it up and displaying it in the browser window.
You have an extra closing div tag
<div id="container">
<div id="functions"></div>
<div id="roll">
included elements
</div>
<div id="keyboard" class="center">
SOME PHP
</div><!--closing tag for keyboard div-->
</div><!--closing tag for container div-->
First, my codes
HTML:
<div class="div parent">
Title
<div class="div child">
<div class="overflowed">
</div>
</div>
</div>
CSS:
.div {
border: 1px solid #000000;
padding: 10px;
overflow: auto;
}
.parent {
max-height: 100px;
}
.overflowed {
min-height: 150px;
}
Sorry I am not good at describe things about webpage designing, so if I describe something incorrectly, please tell me, thanks :)
How to make child div render like this, and it's bottom border always have margin to it's parent's bottom border?
By the way, "Title" in HTML line 2 will change it's height by different screen resolution, so it can't be limited by max-height property.
jsFiddle here: https://jsfiddle.net/dj3ydshf/
You where almost there. I think this is what you are looking for:
.div {
border: 1px solid #000000;
padding: 10px;
overflow: auto;
}
.parent {
max-height: 200px;
}
/* set overflow y-scroll */
/* and give this element a max-height or height */
.child {
overflow: y-scroll;
max-height: 50px;
}
<div class="div parent">
tuitit
<div class="limit">
<div class="div child">
SSSS
<br> SSSS
<br> SSSS
<br> SSSS
<br> SSSS
<br> SSSS
<br>
</div>
</div>
</div>
I want to have a button float in the top right corner at all times, and the other buttons with dynamic width float around it at the left side and under it aswell.
The right button is the one which I want to stick, the blue one's can have different width which I cannot control.
What I've tried:
Setting the red button to position: absolute but that made it
overlap the other buttons
Added padding-right to surrounding box,
which forces the space under the red button to be empty.
Solve it using float: right on the red button, and make sure that the red button is the first in the html.
.container {
width: 300px;
}
.btn {
border: 1px solid #99f;
height: 30px;
width: 90px;
display: inline-block;
}
.btn.btn-red {
float: right;
border: 1px solid #f99;
}
<div class="container">
<div class="btn btn-red"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars