Im having an issue with the header of my code. The header is split into 3 different column's two of which are currently populated with text and an image. (center is yet to be filled).
I notice that when i reduce the size of my browser (zoom in,out) two of the header column's start to break away from the content. The right column stays fixed to the content below because it is populated with text however the center column and the left column being less populated start to break away.
Is it possible to force my 3 column header to stay attached to the content below? Im worried that if someone views the site on a large screen or perhaps a retina display it is going to break away.
<div class="col span_1_of_3 a">
<div class="col span_1_of_3 b">
<div class="col span_1_of_3 c">
CSS is as follows:
.span_3_of_3 {
width: 100%;
}
/* line 28, ../sass/test.scss */
.span_2_of_3 {
width: 66.1%;
height:100%;
}
/* line 32, ../sass/test.scss */
.span_1_of_3 {
width: 33.32%%;
height:100%;
}
Wrap the divs in a parent div. Then float the children and give them a relative width.
<div class="header">
<div class="col span_1_of_3 a">
<div class="col span_1_of_3 b">
<div class="col span_1_of_3 c">
</div>
css:
.header { width:100%; overflow:auto; }
.col { float:left; width:30% }
You can use display: table-cell on each .col and display: table on parent (*). That will force your "cells" to have the same height and stay on the same row.
Though I wonder how you managed your witdths? Is it in percentage or em? You didn't include any CSS so it's impossible to figure.
(*) Add table-layout: fixed on this same parent if you want precise widths to be applied, otherwise the browser will also adapt to the content of each "cell".
Image re sizing will be out of control unless you set the Width/Height to percentage or relative values.
if you don't want to do this, simply set the min-width and min-height CSS Properties.
i prefer the relative sizing (ex. width: 30%; text-align: left;)
Related
I am using ZURB foundation 6 with XY grid and have run into a little problem and most likely something I'm doing wrong.
I want to center elements vertically so I use
<div class="flex-container">
<div class="grid-x grid-padding-x align-middle">
<div class="small-6 cell">Vertically Centered Left Column</div>
<div class="small-6 cell">Vertically Centered Left Column</div>
</div>
</div>
And using jQuery I set the height of flex-container by using windowHeight = $(window).innerHeight();
Voila the items are vertically aligned... However two issues arise from this:
small-6 cell has a width of 50% that is not being respected and shrinks down to the approx length of the text.
flex-container unlike grid-container does not have a width or padding.
To resolve the issue I added some CSS like so:
.flex-container .align-middle {
max-width: 62.5rem;
margin: 0 auto;
width: 100%;
}
So while I've patched the issue I can't help thinking that there must be an easier way, a proper way using just classes. It seems odd that grid-container is setup to do so but flex-container is not.
The main problem here is that with flex-container, the grid-x element will, along being a flex container of its own, also become a flex row item, having the default flex item value 0 1 auto.
This means the grid-x won't grow wider than its content, hence width: 50% won't work on its children (small-6), as their parent doesn't have a width set.
By adding e.g. flex-child-grow or cell to the grid-x element, it will fill its parent's width, and the inner flex items will start behave as expected.
Note 1: With grid-container this is not needed since it is not a flex container, where the grid-x is a normal div, displayed as flex, which, like a block element, by default take full width of its parent.
Note 2: Both flex-container and grid-container does have a default width of 100%, it is the grid-x, when being a flex item, that cause the issue not taking its parent's width by default.
Stack snippet
/* for demo purpose */
body { margin: 0; }
.flex-container { height: 100vh; }
.grid-x { border: 1px solid red; }
.small-6 { border: 1px solid blue; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="flex-container">
<div class="flex-child-grow grid-x grid-padding-x align-middle">
<div class="small-6 cell">Vertically Centered Left Column</div>
<div class="small-6 cell">Vertically Centered Left Column</div>
</div>
</div>
I have noticed, that many websites (SO included) don't shrink to the whole width of the screen, preferring to render content column either of fixed-width or setting max-width property for it. Merriam-Webster dictionary website is a good example for the latter.
Is it possible to create such a layout using Bootstap? I have managed to limit content column width inside it's col-8-md div, but there is a huge gap between content and right sidebar on big displays now.
Live demo: https://codepen.io/anon/pen/dNprzm
HTML:
<div class="row">
<div class="col-md-8">
<div class="content-block">
CONTENT
</div>
</div>
<div class="col-md-4 right-bar">
RIGHT_BAR
</div>
</div>
CSS:
.content-block {
height: 1000px;
max-width: 1000px;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
}
.right-bar {
background-color: pink;
width: 400px;
}
If I'm understanding your question correctly, you just want to be sure to have a fixed width for your content but get rid of the space that's happening to the right of it on large screens?
Remove your margin-right: auto;. Once you get to a screen size where it's larger than 1000px, it's trying to "center" your .content-block
I have the following structure in my html:
<div id="parent1" class="col-sm-12 col-md-6" style="height: 100%;></div>
<div id="parent2" class="col-sm-12 col-md-6">
<div id="child">
<div id="childs_child"></div>
</div>
</div>
Classes col-sm-12 col-md-6 are from the Bootstrap Grid System and make both #parent elements fit side by side on a large screen. Both #parent2 and #child size height automatically to the content of #childs_child. The problem is if #childs_child content is large then the entire page scrolls. I'd like for #child to scroll if #childs_child content is large.
I've tried setting #parent2 { max-height: 100%; } #child { max-height: 100%; overflow-y: auto; } but #child just grows to fit #childs_child.
I there a purely CSS way to accomplish this without setting a specific height on either #parent2 or #child or do I need to use Javascript? I' don't want to set a specific height property because when #childs_child content is small and scrolling is not necessary, I want #parent and #child to shrink to fit and not be full height of the page.
What I have is three containers with dynamically added content. Basically I want those three rows to take up the height of the browser window only. But I want them to resize automatically based on their inner content.
So if they all have the same amount of content, each of them have a height of about 33% and then an overflow: auto. Or if one container has no content and the other two have lots of content the container with no content should have a height of 0 and the other two should be 50%.
Also, there is no need to support IE - it's for an internal product and only chrome and firefox browsers are used so if there is a css3 solution then that is okay.
So here is the example of what I have now which doesn't work how I want:
HTML:
<div class="container">
<div class="one">
<!-- dynamically added content -->
</div>
<div class="two">
<!-- dynamically added content -->
</div>
<div class="three">
<!-- dynamically added content -->
</div>
</div>
CSS:
.container {
position: absolute;
top: 0;
bottom: 0;
}
.one,
.two,
.three {
overflow: auto;
max-height: 33%;
}
Height is automatically set based on content. You have a max-height set so you'll never get a height of 50%. Does the container element need to say one size or can it change with content?
I need to make an element that takes up a given amount of space (width) such that I can line up several of them together to make a horizontal bar. I can get it to work with absolute position, but I have to manually control 'left' to get the bar segments (rectangles) lined correctly, which is becoming somewhat troublesome. Is there an alternative?
You can do something like this where .rect divs are your boxes:
<style>
#container{
float:left;
position:relative;
}
.rect{
float:left;
height: 50px; /* or whatever you want */
position:relative;
width: 50px; /* or whatever you want */
</style>
<div id="container">
<div class="rect"> </div>
<div class="rect"> </div>
<div class="rect"> </div>
<div class="rect"> </div>
</div>
This would make a horizontal row of .rect boxes corresponding to the width/other css properties of your container.
You can simply float them.
Assuming a vertical stack you can float all inner elements right, give them a clear: left; and put them in an outer element that has a fixed width equal to the largest element.
Assuming a horizontal row, just floating them should be enough.