My problem is I would like a set of side by side divs. These divs can grow to an arbitrary height so vertical aligning is important. As suggested by another SO post, in order to tackle the vertical align problem I have a structure similar to this. Please help me fill in the blanks.
<div id="main-container">
<div class="formatter">
<div class="content1">
<!--- I am fixed at 200px ---->
</div>
</div>
<div class="formatter">
<div class="content2">
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
</div>
<div class="formatter">
<div class="content3">
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
</div>
Display within the browser:
CSS:
#main-container {
width: 900px;
}
.formatter {
display: inline-block;
vertical-align: middle;
}
.content1 {
float: left;
width: 200px;
}
You need to declare them as table-cell.
Lets try an unorthodox approach
Auto width and vertical alignment becomes very easy using CSS flex display
Code to get your basic layout, vertical and horizontal alignment (withour padding or borders or text-alignment)
<div id="main-container">
<div class="content1">a
<!--- I am fixed at 200px ---->
</div>
<div class="content2">bbb
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
<div class="content3">c
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
#main-container {
width: 900px;
display: flex;
}
.content3 {
flex-grow: 1;
}
.content1 {
width: 200px;
}
Fiddle - http://jsfiddle.net/n3CwB/
Now you may want to retain your original HTML structure if you want more control of the alignment of the content (like vertically align middle the content), but this should get you started with the basic layout.
Related
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.
I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click
Three divs each above the other, within a parent container. Top div is fixed height. Bottom div has content that takes up an unknown amount of vertical space but needs all content within it to display. Top div should fill remaining vertical space. Every
<div id="container"> // 100% of visible window height but should not overflow
<div id="top"> // Fixed height
</div>
<div id="middle"> // Use remaining vertical space
</div>
<div id="bottom"> // Unknown height but contents should all be shown
</div>
</div>
I need to support recent-ish legacy browsers (e.g. IE9+) & mobile browsers (e.g. Android 4.4+), so flexbox based layouts are out. I tried Javascript (using JQuery) to try and set
middle div height = container height - (top div height + bottom div height)
but for some reason the browser was mis-reporting the bottom div height during page render (latest Chrome on Win 7) so result came out wrong. And I'd like to avoid JS if possible (tho am open if a solution works).
Need to support as many desktop and mobile browsers as possible.
Thanks
For old browser , where flex cannot be used , display:tablecan be a fall back but layout will be able to grow past window's height where content is too long to be shown at once.
A CSS only mix using flex and table as a fallback where flex is not supported: https://codepen.io/gc-nomade/pen/BdWXpp
Below, snippet with display:table/table-row CSS only (which works for almost any browser (IE8 and next)
html,
body,
#container {
height: 100%;
width: 100%;
margin: 0;
display: table;
background: turquoise;
}
#container>div {
display: table-row;
}
.buffer {
display: table-cell;
/* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/
vertical-align: middle;
text-align: center;
}
#top {
background: orange;
height: 100px;
}
#middle {
height: 100%;
}
#bottom {
background: tomato;
}
<div id="container">
<div id="top">
<div class="buffer">top 100px, test me full page and in any medias
</div>
</div>
<div id="middle">
<div class="buffer">Use remaining vertical space
</div>
</div>
<div id="bottom">
<div class="buffer">Unknown height<br/> that fits <br/>to content to hold
</div>
</div>
</div>
This is what my webpage looks like on my computer
What I am trying to do is:
move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).
Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)
I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/
How would I go about just centering one of the rows, such as:
<div class="row no-gutter">
<div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
<div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
<div class="col-xs-1"><input type="text" class="marks form-control"></div>
<div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>
Anything to point me in the right direction would be great.
Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.
I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades
#table-of-grades {
display: table;
margin: auto;
}
.table-cell {
width:50%;
float:left;
}
I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.
https://jsfiddle.net/Lzvz60u1/
Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div
DEMO
It would be very simple using flex box.
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>
I'm building a Twitter-Bootstrap site that has two columns: a narrow side column and a main article column. On each page, the widths of the columns are fixed and the heights depend on how much is inside them. The side column's height always must match the main column's, but the main column's height is variable. On some pages, the main column is short because there aren't many articles inside while on other pages its height is much longer. When the main column's height is taller than the side column's, the side column's increases.
My question is, what are the best methods/technologies to implement this, without using a CMS? I'm thinking classes, maybe something along the lines of masonry CSS...but not quite sure where to start. For the smaller-screen version, I'm planning to align them as just one column, so this won't need to be fully responsive.
I've prepared a crude drawing of what I'm trying to accomplish:
So, you can use flex-box for this. Your HTML would look something like this:
<div class="flex-container">
<div class="flex-column">
<!-- Left column content goes here -->
</div>
<div class="flex-column">
<!-- Longer right column content goes here -->
</div>
</div>
And your CSS:
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-container > .flex-column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 50%;
}
Support for flexbox is limited, but it is the best solution for you here. http://caniuse.com/#feat=flexbox
UPDATE:
Here is a JSFiddle showing the implementation in action.
In addition to the flexbox option - which I'd definitely go for it if I wouldn't want full cross-browser compatibility -, you can use some JavaScript or jQuery to set the side height if it's smaller than the content height.
See it in action here! You can try it by removing dummy text from the content etc.
JavaScript:
var contentHeight = document.getElementById('content').offsetHeight;
var sideHeight = document.getElementById('side').offsetHeight;
if (contentHeight > sideHeight) {
document.getElementById('side').style.height=contentHeight+'px';
}
The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.
There is also clientHeight, which you could use depending on the case, which is:
The Element.clientHeight read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
jQuery:
var contentHeight = $(".content").height();
var sideHeight = $(".side").height();
var side = $(".side");
if (contentHeight > sideHeight) {
side.height(contentHeight);
}
If you can get away with it, I would recommend using flex box. If not, here is a CSS solution http://plnkr.co/edit/geevZTdUy4PDEJqvNHmp?p=preview
HTML:
<body>
<div class="container">
<div class="row eq-row">
<div class="col-xs-4 eq-col red">This is the first col</div>
<div class="col-xs-8 eq-col blue">
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
</div>
</div>
</div>
</body>
Here's the CSS.
.red
{
background-color: red;
}
.blue
{
background-color: blue;
}
.eq-row
{
overflow: hidden;
}
.eq-col
{
margin-bottom: -99999px;
padding-bottom: 99999px;
}