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.
Related
I am new to bootstrap so I don't exactly know how it works !
What I want to do is to make the 3 images shown in the screen shot of same size.
Their resolutions are different .
This is the html for each image
<div class="col-sm-2 ">
<div> <img src="img/test.jpg"> </div>
<div > <h3>Text Here</h3> </div>
</div>
This is the screen shot
add class="img-responsive" to your img and for the same size display you can add some custome class such as my_img and set the size there:
my_img{
height: 200px
width: 150px
}
or set a default height to the parent. Than you can do width: 100%; height: 100%
So what you know have is a column. That sets the width. than you have a div which has no class yet. You can add style to that div or to the img directly.
The column is responsive by default so just give the img a width: 100%; (it will scale to parent element) and that div will scale to its parent element as well which is col-sm-2.
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 want to make layout where I will have different full width backgrounds. For example top is full width orange color, inside the full width div I have container that keeps everything in specific dimension (width: 1000px). And I met a problem, The content of the container div doesnt stretch the full width div. So right now to keep it work, I have to set in .orange and .red specific height. But this is not the solution, because right now my block has xxx heights, what If I add something like more pictures - I have to set bigger hight etc...
Here is what I mean:
HTML
<div class="full-width orange">
<div class="container">
content
</div>
</div>
<div class="full-width red">
<div class="container">
content 2
</div>
</div>
CSS
.full-width {
clear: both;
width: 100%;
overflow: hidden;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
I am sorry for my bad english.
if you put more content into your DIVs, they will stretch. their default height is auto (http://www.w3schools.com/cssref/pr_dim_height.asp) which automatically stretches the div to the height it needs to be. if you set height to a percentage, the div will be that percentage of it's parent container.
here is a JS fiddle for you to play with http://jsfiddle.net/dv9ah/
i set the
height: auto;
in both the .red and .orange classes, but you can change them to a set height (like 100px) to see how they change.
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;)
I'm working on a centered layout with 960px of width. Within the wrapper I want a Slideshow, that is 100% of width (the browsers width).
How can I achieve this?
<div id="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
<div class="slider"> //100%
Slider-content
</div>
<div class="text"></div>
</div>
Thank you in advance... :-)
div.slider will already be 100% width, since block-level elements like div already expand horizontally to fill all their parent's space unless otherwise specified. This is going to be true for div.text as well.
If you are asking how to create the 960px centered wrapper, the techniques are pretty standard. Either:
div#wrapper
{
margin: 0 auto; /* horizontal margin set to "auto" pushes <div /> to center
width: 960px;
}
or
div#wrapper
{
left: 50%; /* put left edge at 50% */
margin-left: -480px; /* move left edge back by 480px = half width.
this makes the center of #wrapper match center of page */
position: absolute; /* position: absolute makes the left: 50% line work */
width: 960px;
}
You may want to look at ways of including the slideshow div outside of the wrapper div if the wrapper is to be 960px and the slideshow is 100% of browser width.
Typically, absolute positioning of the slideshow div inside the wrapper div won't affect the dimensions of its container (wrapper) div but you lose some control in centering the contained (slideshow) div.
I would suggest changing #wrapper to .wrapper so that you can reuse your wrapper class later down the page. Then, I recommend the following markup:
<div class="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
</div><!-- end .wrapper -->
<div class="slider"> //100% of browser viewport
Slider-content
</div><!-- end .slider -->
<div class="wrapper"> //960px
<div class="text"></div>
</div><!-- end .wrapper -->
The solution was very simple.
How to make a DIV, that is within a fixed width DIV, to be the width of the browser.
HTML:
<div id="wrapper"> //960px
<div class="slider"></div> //100% of browser width
</div>
CSS:
.slider {
position: absolute;
width: 100%;
left: 0px;
}