I'm trying to accomplish some atypical div behavior, so I'm not sure if this is possible.
I have three divs which sit next to one another horizontally: A, B, and C (from left to right). When the browser is resized, or if a user's browser window is too small, I would like div B to drop below div A, rather than the typical behavior where div C drops below div A.
The typical behavior is demonstrated by this code:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
http://jsfiddle.net/P5xLx/
When I place divs A and B in one table-cell and div C in another, I can get div B to drop below div A. The only issue with this is that the left table-cell which contains the two divs does not collapse to the width of the two divs, and so there is still a gap between divs A and B and div C. This code shows that behavior:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div style="display: table-cell;">
<div class="box" style="height: 500px;">div c</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/cncgs/
Is there a way to make the left table-cell take the width of the two stacked divs, or maybe there is some other way to accomplish this which doesn't involve the table at all. Basically, I just need to find a way for div C to sit next to A and B once B drops below A. I'm trying to find a css solution and avoid using a javascript solution which, for example, calculates the width of A and B and compares it to the width of the left table-cell.
EDIT In the examples above, the widths are 200px, but in the actual implementation, that 200px is a variable width, depending on user-submitted content. I'm looking for a solution which can deal with variable-width columns.
How does this suit? Using media queries to change the width of the container for the first two divs:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type="text/css">
.box {
display: block;
margin: 4px;
background: #ccc;
width: 200px;
float:left;
}
.leftCol{width:416px; float:left}
#media screen and (max-width: 1000px){
.leftCol{width:208px;}
}
</style>
</head>
<body>
<div class="leftCol">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
Obviously the widths will vary depending on what you’re building.
This might be close to what you want
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
.left { float: left; }
.right {float: right;}
.wrap {max-width: 625px; overflow:auto;}
</style>
</head>
<body>
<div class="wrap">
<div class="box left" style="height: 200px;">div a</div>
<div class="box right" style="height: 500px;">div c</div>
<div class="box" style="height: 300px;">div b</div>
</div>
</body>
</html>
http://jsfiddle.net/MR6fj/
The only problem is div c stays all the way to the right of the wrap div all the time. This might be closer to what you wanted though.
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed last year.
I have a problem with my CSS. I have a panel form in my index page and I want to move it in the middle of the page vertically and horizontally. But I don't know how to create a CSS for this.
Here's my sample code:
<div class="login_header"></div>
<div class="container" style="text-align: center;">
<div class="col-md-6 col-md-offset-3">
<div class="panel_form panel panel-default">
<div class="panel-content">
<h1>test</h1>
</div>
<div class="panel-footer">
<p>test</p>
</div>
</div>
</div>
</div>
<footer class="footer"></footer>
I have a CSS like this:
.login_header { min-height: 50px; background-color: #f5f5f5; }
.panel_form {
/* I don't have an idea with this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
}
I am not good enough in CSS that's why I need your help. That's all thanks.. :)
Bootstrap 4:
<div class=" h-100 d-flex justify-content-center align-items-center">
<div>
Items are Centered horizontally and vertically
</div>
</div>
JsFiddle
Some of the other answers on this question use CSS hacks with tables and custom CSS classes. As the poster asked "How to center vertically and horizontally using Bootstrap", here is how to do that using only Bootstrap 4 utility classes:
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
Something of note is that due to the styling on the parent div, when adding additional elements in the same div, they will appear beside the first one, rather than below it. To fix this, just add an additional div inside the parent to reset the styling.
<div class="d-flex justify-content-md-center align-items-center vh-100">
<div>
<p>Content 1</p>
<p>Content 2</p>
</div>
</div>
This does work with Bootstrap flex, I've found that it works best when placed inside a flex component like this, rather than wrapping the entire row.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 1</p>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 2</p>
</div>
</div>
</div>
</div>
Here is a breakdown of each class:
d-flex: Effectively display: flex, allows the div to grow or shrink depending on the amount of content.
justify-content-md-center: Justifies content in the center of the page, can also be replaced with justify-content-sm-center or justify-content-lg-center to change the breakpoint.
align-items-center: Centers the alignments of all items in a div.
vh-100: Sets the height of the div to 100vh, or 100 "vertical height". This ensures that the div is the correct height to allow for vertical alignment.
I found some of the answers very difficult to implement. However, this question seems to be one of the most basic ones and so here's an answer that someone else like me might find useful.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
hello world!
</div>
So, check this out; it's pretty cool
HERES A CODE PEN TO SEE IT IN ACTION
html, body 100% width and height;
container with relative or fixed positioning with 100% width and height, if you want to center in viewport. Size doesn't matter if you just want to ceter it within the element.
centered thing needs absolute positioning, a top and left of 50%, then use transform: translate(-50%, -50%);
regardless of its size, it's centered in viewport
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
}
#outer #container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
LESS version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
#container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;top: 50%;
}
}
What worked for me is this:
<div class="container h-100">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
</div>
Asked and answered here: Twitter Bootstrap - how to center elements horizontally or vertically
But the short of it is:
<div class="center-block">...</div>
Link to the Bootstrap docs: http://getbootstrap.com/css/#helper-classes-center
Brothers check this one it's working...
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
**<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
<div class="jumbotron">
hello world!
</div>**
</div
</body>
</html>
While I haven't found a solution to the general problem in pure Bootstrap 5, here is a solution that works with just a little additional CSS. Please test by changing the browser window size, or using the Responsive Mode of your browser, but not both at once, since they don't behave well together.
This example centers a 50% wide and high div, and centers the text inside it.
It works perfectly down to about a 200px by 200px window.
See Code Pen https://codepen.io/david263/pen/eYvOGOB and use Settings > Full screen mode.
<style type="text/css">
/* Required for proper centering */
html, body{
height:100vh;
width:100vw;
}
</style>
<!-- Outer container, full page width and height, red border -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh; overflow:hidden; border: 2px solid red">
<!-- Inner row, half the width and height, centered, blue border -->
<div class="row text-center d-flex align-items-center" style="overflow:hidden; width:50vw; height:50vh; border: 1px solid blue">
<!-- Innermost text, wraps automatically, automatically centered -->
<h2>Center This Text (Even if Wrapped) in all Viewport Sizes</h2>
</div> <!-- Inner row -->
</div> <!-- Outer container -->
Give the outer div
display: table;
and the inner div
display: table-cell
Then you can use
vertical-align: center
on the inner div
Read further: Twitter Bootstrap - how to center elements horizontally or vertically
I know how to float divs and how to stack divs. But I can't get both of them together right now.
What I need is this:
#########################################
# # #first_row #
# #brand ###############################
# # #second_row #
#########################################
They lay all in my #header container with the following specs:
#header {
width: 100%;
}
#brand {
float:left;
width: 300px;
}
#first_row, #second_row {
width:100%
}
Here you go.
#header {
width: 100%;
}
#brand, #first_row, #second_row {
float:left;
}
#brand {
width: 300px;
height: 300px;
}
#first_row, #second_row {
width: calc(100% - 300px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="header">
<div id="brand">
Brand
</div>
<div id="first_row">
First row
</div>
<div id="second_row">
Second row
</div>
</div>
</body>
</html>
You need another container, floating right, then your div inside will be stacked :
<div id='header' class='floating-container'>
<div class='left'>Brand</div>
<div class='right'>
<div class='first-row'>First Row</div>
<div class='second-row'>Second Row</div>
</div>
</div>
JSFiddle demo
EDIT : if you do not want to fix the size of the right column, just do not :
Second demo
Take a look at the media object:
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
B
Just wrap your first:row and second:row into a div with float:left and it will work:
<div id="header">
</div>
<div id="brand">
brand
<br/>
brand
</div>
<div id="rows">
<div id="first_row">First row</div>
<div id="second_row">second row</div>
</div>
here you have an example
You need to wrap #first_row and #second_row in a div and float it left as well. Like:
<div id="header">
<div id="brand">Brand</div>
<div style="float:left">
<div id="first_row">First row</div>
<div id="second_row">Second row</div>
</div>
</div>
so guys, if u test the code below, u can see that everything is alright, except if u size down the window, so the flash menu ( red div ) is going out of the page to the right.
well if the window is smaller then 900px, there is a HORIZONTAL scrollpane, so far so good, but it just scrolls the content of the page!
I want the upper part also to scroll, but only horizontal, cuz I want them to be fixed (stay on top of the site always)...
any suggestions? I've tried so many things from google, but no one of them was the right one 4 me...
thx & g.r. ace
html:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div_page" align="center">
// page content goes here
</div>
<div id="div_menu">
<img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
<div id="div_flash"></div>
</div>
</body>
</html>
css:
#charset "utf-8";
body {
padding:0px;
margin:0px;
}
#div_menu {
position:fixed;
top:0px; right:0px; left:0px;
width:100%; height:40px;
min-width:800px;
overflow:visible;
background-image:url(img/menu.png);
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 40px;
background-color:#333;
}
#div_flash {
position:absolute;
top:0px; left:250px;
width:500px; height:150px;
background-color:#F00;
}
#div_page {
position:absolute;
top:40px; right:0px;left:0px;
min-width:800px; min-height:500px;
}
As it seems to me, pure CSS can't solve this issue.
But adding a few lines of JQuery may help:
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
CSS position of #div_menu should be changed to absolute.
UPD:
In pure JS it would be:
<script type="text/javascript">
var div_menu = document.getElementById('div_menu');
window.onscroll = function (e) {
if (div_menu)
div_menu.style.top = window.pageYOffset + 'px';
}
</script>
There is a CSS-only solution possible with position:sticky , top:0
See this Fiddle : Link
$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
});
It will be helpful.
Hie, that is because you have made the widht of the content boxes/divs fixed; If you want to make them adjust as per the window size, then use percentages for width like: width: 60%; This is infact a responsive design. But still if you want your page header only to be scrolled, then make sure that you bound the content required in a div tag, whose width should be determined by page's width and apply overflow property for that tag; if you want only in horizontal direction, then use overflow-x:scroll and overflow-y hidden(since if one direction is specfied, other will be visible but with disabled mode), which is as shown:
<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
//your conetnt//including divs
</div>
The thing here is, whenever the width of the content in a div/any tag is more than the width of its outer div, then overflow happens; in this case, you can use overflow property, where you can set properties like : hidden, show, scroll, auto etc..
But try to avoid this, because responsive design is the next-generation markup language technique, where the widths(size) should be dependent on the browser size... :)
Happy coding.. :)
$("#body").scroll(function() {
scrolled = $("#body").scrollLeft();
$("#header").scrollLeft(scrolled);
});
.header {
background-color: red;
position: absolute;
top: 10px;
left: 8px;
width: 120px;
overflow: hidden;
}
.body {
overflow: scroll;
margin-top: 51px;
height: 100px;
width: 120px;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell1 {
border-top: 1px solid red;
border-right: 1px solid red;
background: #DDD;
height: 40px;
min-height: 40px;
width: 50px;
min-width: 50px;
}
.cellh {
border-top: 1px solid red;
border-right: 1px solid red;
background: yellow;
height: 40px;
width: 50px;
min-width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here a very simple solution
Uses Flex for the table formatting -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="header" class="row header">
<div class="cellh">1</div>
<div class="cellh">2</div>
<div class="cellh">3</div>
<div class="cellh ">4</div>
<div class="cellh">5</div>
</div>
<div id="body" class="col body">
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
</div>
</div>
</div>
</body>
</html>
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
Each column has a fixed width of 200px with a 20px margin.
The top-left box and the columns have variable height.
Like this
Tor Valamo kindly provided an answer to a similar question (that being elastic, this is fixed), but I cant centre the layout, as it uses position: absolute.
How can I do it? I know that using a table with colspan and rowspan the answer to this problem is trivial, but I would like to avoid table-based layout like the plague!
Not sure I understand exactly what you're asking, but something like this...?
<div style="float: left;">
<div style="width: 420px;">top</div>
<div style="width: 200px; float: left;">bottom left</div>
<div style="width: 200px; float: left;">bottom right(ish)</div>
<div style="clear: both;"></div>
</div>
<div style="width: 200px; float: left;">big left box</div>
<div style="width: 200px; float: left;">big right box</div>
You can still use the layout that you linked to and have it be centered, despite the position: absolute. I've adapted it for you here (you'll have to tweak to add in the margins, but it works, I tested it:
<html>
<head>
<style>
#outer, #left, #right, #top_left, #bottom_left,
#bottom_left_left, #bottom_left_right, #right_left, #right_right {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid #000;
}
#outer {margin:0 auto; position:relative;width:800px;}
#left {right:50%;width:400px;}
#top_left {position:relative; width:400px;}
#bottom_left {position:relative;}
#bottom_left_left {right:50%; width:200px;}
#bottom_left_right {left:50%; width:200px;}
#right {left:50%;}
#right_left {right:50%; width:200px;}
#right_right {left:50%; width:200px;}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="top_left">Top left</div>
<div id="bottom_left">
<div id="bottom_left_left">Bottom left</div>
<div id="bottom_left_right">Bottom right</div>
</div>
</div>
<div id="right">
<div id="right_left">Near Right</div>
<div id="right_right">Far Right</div>
</div>
</div>
</body>
</html>