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;
}
Related
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>
So I have two elements, in my case an image and a button. I have the image at the top of the page and the button at the bottom. I want to have a div (or some other element) to display text, but I need it centered between the two elements.
<div style="text-align: center;">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<div style="text-align: center; border: 3px solid blue;">Help</div>
<button style="position: absolute; bottom: 5px;">Hi</button></div>
JSFIDDLE
I'm using HTML and Javascript.
Look into flexbox for modern layouts:
a guide to flexbox
You could use flexbox, as suggested in other answers. This can be hard to wrangle sometimes though, at your first go at it. Though it's highly recommended to add flexbox to your tool belt.
To fix this perhaps more simply:
1.) You could set the height of the parent div (to whatever you want) and then set the margin-top on the element that you want to make centered. You can tweak it until it sits right.
OR...
2.) Alternatively: You could also set the position:relative; and the top: 100px (or whatever sets it into the middle. Setting the position rule will allow you to set top, or left, right or bottom. Without setting the position rule, you can't use those rules.
Create a <div></div> to hold your text whatever you want to put in it and then manipulate that with CSS.
Flexbox provides the best and the short solution from the traditional solutions.
You can find the working fiddle here https://jsfiddle.net/rr0e4qh7/14/
Your Html
<div class="container">
<div class="image">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
<div class="text">
Help
</div>
<div class="btn">
<button>
My Button
</button>
</div>
</div>
Here is CSS part
.container{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
.text{
display: flex;
height: 100%;
align-items: center;
justify-content: center
}
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>
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.