I have the following problem: I have a table with a fixed width and height, which should be in the middle.
The right of it should be div, with a width from the right edge of the table to the left edge of the browser, but it is necessary that in this div image was cropped on the right (so that only the left side, the size of div)
On the left side of the table you need the same thing in reverse, as well as lower
Here's what it looks like - http://db.tt/bZU8Z9SJ
How can you do?
Alright, to give you some more of an answer, make a basic layout with divs:
<div id="container">
<div id="left"></div>
<div id="table"> <!-- Your table here --> </div>
<div id="right"></div>
</div>
And add some CSS:
#table{
float: left;
width: 50%;
height: 200px;
}
#left{
float: left;
background: #3f3;
width: 25%;
height: 200px;
background-position: right;
}
#right{
float: left;
background: #f3f;
width: 25%;
height: 200px;
background-position: left;
}
Fiddle here: http://jsfiddle.net/ycS2N/
Related
Here is the html and css code:
HTML:
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
CSS:
#box1 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: left;
margin-left: 100px;
}
#box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: right;
margin-right: 100px;
}
So this shows two blocks on the same horizontal line. When I minimize the browser window by dragging the window to the left, it gets to the point where the two divs touch.
Once they touch, the one on the right goes UNDER the one on the left, but not vertically aligned. Like this:
right after touch
My question is, how can I make it so that when the boxes touch, the right div goes DIRECTLY underneath the left div and stays until I arrange the window width big enough. I want it to stay like this when they touch:
want
I couldn't find a bootstrap doc for this. I want to use the two boxes to contain a dropdown select menu (I already know how to do this). Let me know if you know of a bootstrap class that can suit my needs or a way to fix the code that I provided. I'm open to suggestions in jQuery and Js. Let me know if my question wasn't clear and I will be responding. Thank you.
This is a good time to use display: flex see fiddle https://jsfiddle.net/cvnrwo13/5/
<body>
<div class="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
CSS
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 100px 0 100px
}
#box1, #box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
}
For this, a good option would be to use a container with a specified width and text-align: center. Then en lieu of floats, set the boxes to be display:inline-block elements. As inline elements, they will then follow whatever text alignment their parent container specifies.
HTML
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
CSS
#container{
text-align:center;
width: 100%;
}
#container .box {
width: 300px;
height: 150px;
background-color: #75A9F9;
margin-top: 50px;
border-radius: 5px;
display: inline-block;
}
https://jsfiddle.net/qacnL2yr/
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 7 years ago.
Improve this question
I want to implement a panel like following images using bootstrap:
Figure 01: side bar in full state.
The left panel will have a show/hide button.
On hide, it will slide upward to its minimum state (figure 2).
the main div container would increase in size and fill the empty space in left.
All resizes need to be with transition animation.
Figure 02: Side bar in minimum state.
Any help/tips, how can achieve that?
One way would be to use float with overflow: hidden:
.parent{
overflow: hidden;
text-align: center;
}
.panel{
float: left;
width: 20%;
background-color: #EFEF66;
}
.navigation{
float: right;
width: 80%;
background-color: #EF66EF;
}
.main{
overflow: hidden;
width: auto;
clear: right;
background-color: #66EFEF;
}
<div classs="parent">
<div class="panel">Side Panel</div>
<div class="navigation">Navigation</div>
<div class="main">Main section</div>
</div>
In the above snippet, you have it as the primary state. Now if you want the panel to stretch down, just force a height for panel:
.parent{
overflow: hidden;
text-align: center;
}
.panel{
float: left;
width: 20%;
height: 50px;
background-color: #EFEF66;
}
.navigation{
float: right;
width: 80%;
background-color: #EF66EF;
}
.main{
overflow: hidden;
width: auto;
clear: right;
background-color: #66EFEF;
}
<div classs="parent">
<div class="panel">Side Panel</div>
<div class="navigation">Navigation</div>
<div class="main">Main section</div>
</div>
Given that you are not showing what you got so far I'ts really hard to help you.
Check this codepen for a little help with the HTML structure
HTML
<div class="container-fluid">
<div class="header">
<div class="col-xs-3 header-left">
Hi
</div>
<div class="col-xs-9">
</div>
</div>
<div class="app-body">
<div class="col-xs-12 inner-body"></div>
</div>
SCSS
.header{
height: 90px;
background-color: blue;
position: relative;
.header-left{
height: 290px;
position: absolute;
background-color: red;
}
}
.app-body{
height: 200px;
width: 100%;
padding-left: 25%;
.inner-body{
height: 100%;
background-color: green;
}
}
You should be able to get to what you want starting with the code I gave you. But have In mind that my code shows the slide-down state. You'll have to add animations and JS events to achieve the effect you want.
I have two div's next to each other - left one and right one.
There is possibility, that the right one will be gone, then i want the left one to be centered.
HTML
<div class="contener">
<div class="left"></div>
<div class="right></div>
</div>
CSS:
.left {
width: 75%;
height: 240px;
float: left;
}
.right {
width: 25%;
height: 250px;
float: right;
}
.contender{
text-align:center;
}
.left {
width: 75%;
height: 240px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
.right {
width: 25%;
height: 250px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
the asterisk(*) is used to fix ie7 so it's a bit of a hack.
You can set the display property of .left and .right to inline-block and set the text-align:center for the parent element as jayaguilar pointed out. However, not that this won't work with the exact html and css you've.
You need to either remove the line break between inline elements in your html markup as follows:
<div class="container">
<div class="left"></div><div class="right"></div>
</div>
or comment it out
<div class="container">
<div class="left"></div><!--
--><div class="right">
</div>
or reduce their width to something less than 100% in order to accommodate the whitespace after inline-block elements.
Demo (click the remove button)
<div class="contener">
<div class="left"></div>
<div class="right"></div>
</div>
And now some easy jQuery:
$(".right").click(function() {
$(this).hide();
$(".left").css({ 'text-align': 'center'});
});
So with that we make "desapear" the right one, and then you do what you want with the left one! :)
Say I have 3 div elements that all have width:50% but have undefined heights. Now say these elements all have the attribute float:left.
Due to the width:50% attribute, the three elements are now in a two column layout, the first element sits left of the second, and the third sits below both the first.
Now, if the first div is 50px tall, and the second div is 200px tall, the third div sits below the line created by the taller div, and thus a big white space of 150px is created between div 1 and div 3.
How can one prevent the white space from occurring?
PS, the divs are being generated dynamically!
Here's a jsfiddle
make the Second element float right
See that Working Fiddle
HTML:
<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>
CSS:
div
{
float: left;
width: 50%;
}
.First
{
height: 50px;
background-color: red;
}
.Second
{
height: 90px;
background-color: yellow;
float: right;
}
.Third
{
height: 50px;
background-color: green;
}
Edit: If you have an unknown number of div's,
something like this HTML (alter the sizes as you want)
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
Just use this CSS:
div
{
width: 48%;
margin: 1%;
background-color: #09F;
}
div:nth-child(odd)
{
float: left;
}
div:nth-child(even)
{
float: right;
}
Check out this Working Fiddle
Having trouble extending the left and right divs to the bottom of the page, no more no less.
Here's my work.
http://jsfiddle.net/qggFz/26/
Thanks,
Dale
Here is your js solution, sir:
//Can place js in <head> tag
$(document).ready(function(){
var remHeight = $('html').height() - $('#top').height();
$('#left').css('height', remHeight);
$('#right').css('height', remHeight);
});
css:
body, html
{
height: 100%;
}
.top {
background: red;
}
.left {
width: 25%;
background: grey;
float: left;
}
.right {
width: 25%;
background: blue;
float: left;
}
html:
<html>
<body>
<div id="top" class="top">
<div id="msg">hello</div>
</div>
<div id="left" class="left">
left
</div>
<div id="right" class="right">
right
</div>
</body>
</html>
http://jsfiddle.net/zTEhB/
Check: http://jsfiddle.net/5gqNn/
You need to specify the height of the root element.
Reference:
https://developer.mozilla.org/en/CSS/height
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.
You have to say that the body and html tags are also 100% like this:
html, body{
height:100%;
position: relative;}
.top {
background: red;
}
.left {
position: relative;
width: 25%;
height: 100%;
background: grey;
float: left;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%;
}
.right {
position: relative;
width: 25%;
height: 100%;
background: blue;
float: left;
}