Here's the sketch: http://jsfiddle.net/jondum/efVjj/20/
The goal is to have each of those divs on the same line.
If I add a fixed height to each of them it would appear to work, but I would like to avoid setting an explicit height on each element.
So how do I get those buggers all on the same line?
If you want to have them on one line horizontally, you can try to use display: inline-block with white-space: nowrap on a parent, so the blocks would be on one line: http://jsfiddle.net/kizu/efVjj/26/
You've set the width of the parent container at 400px and the three child divs each at 400px.
400 x 3 = 1200. Set the width of the parent container to at least the size of its child elements.
.main-container
{
width: 1200px;
}
One option is to use absolute positioning.
`
<div class="element" style="background:blue;position:absolute;left:0px;">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="element" style="background:green;position:absolute;left:400px;">
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="element" style="background:red;position:absolute;left:800px;">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
.main-container
{
width: 1200px;
overflow:hidden;
}
.element {
float:left;
width: 400px;
}
Related
I want to have CSS that makes each div the size of the screen and then whenever the user scrolls the next div will snap into view. There's a JavaScript library that does the latter but I can't remember the name. As for getting every div the size of the screen I have tried the following but to no avail.
<div>Div Content</div>
div {
width: 100%;
height: 100%;
}
You can use vw and vh to make an element the size of the viewport:
div {
width: 100vw;
height: 100vh;
}
Divs are block elements and 100% of the width of the parent by default. As for the height, use 100vh instead.
There are new units in css3 which makes it easier to assign viewport-width and viewport-height.
They are vw,vh.
div{
width:100vh;
height:100vh;
}
if your div are direct child of body, then height:100% can be calculated from the viewport if every parents are set the same.
Why? : % needs a value from the parent to be calculated and applied.
width is here not necessary for block elements and can even become a problem if margin, border or padding are added.
html,
body,
div {
height: 100%;
}
<div>Div Content</div>
<div>Div Content</div>
<div>Div Content</div>
I am leaning Angular 4 and I am creating an app with Bootstrap , I am using the grid system, but I am not ale to set any height to the columns of the grid.
I have tried all solutions available on internet setting overflow to hidden at container and then setting clear : both on column. Not able to make it work
<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
Column 2
</div>
</div>
</div>
.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}
JsFiddle link link
Please let me know!!!
The problem is that you are trying to set height with percentage.
The height of a block element (div is a block element) depends on the height of the content.
If you specify a percentage, that will always respect the height of the content, no matter what.
Change the height to pixels and you will control the height of the element.
See this answer for more information
.container {
display: inline-block;
width: 100%;
height: 100%;
margin: auto;
overflow:hidden;
}
.row {
overflow:hidden;
width:100%;
height:25%;
}
.col-lg-12 {
float: left;
width: 10%;
height: 350px; -> height in pixels, not in percent
clear: both;
}
Does defining the height of a parent container work? (Using vh units to define its height, as illustrated below, should make it responsive.)
It's hard to tell from this snippet but in your full code, do you define the height of an element that contains the .container div? If not, the 90% that you've set as .container's height won't work, because there won't be a defined context for exactly what you're using to create your height: 90%.
If you add the height to your parent element -- and you can see this in play in this example on Codepen: https://codepen.io/msummers40/pen/EobqOo -- things take on more definition/greater heights. On that Codepen page, I just added a new parent element and a corresponding CSS selector:
.container-of-container {
height: 100vh;
width: 100%;
}
With the .container-of-container div's height set to 100vh, .container's height becomes 90% of that. In turn, your two rows are each 25% of .container's height.
In any case, if you set the height (using px, em, vh etc) of the parent element of .container, you should see the resizing take place more as you're expecting.
I have a child element that is an image. It's floated next to another div inside a parent. I want the image's width to be a percentage of the parent's parent. However, its parent does not have a set width to work off (because the text in the other child div can vary). Is there a way to still use % to set the image's width relative to the grandparent?
<div class="grandparent">
<div class="parent">
<!-- I want this to be 30% the width of grandparent -->
<img class="myImage" src="someimage.jpg" />
<div class="text">Some text here</div>
</div>
</div>
Parent would simply use overflow: hidden; and grandparent has a width of width: 100%; and the two children are both float: left;.
EDIT: The parent div must shrink to the child divs so it doesn't run over sibling divs. That's why it has no width but uses overflow: hidden.
If you set the parent div to 100% it should take the width of the grandparent. That will allow you to properly use 30% on your image.
.grandparent {
width: 400px;
}
.parent {
width: 100%;
}
.myImage {
width: 30%;
}
Fiddle
Take a look at this fiddle. http://jsfiddle.net/mstwp/
The html is:
<div id="parent" style="width: 150px; display: inline-block; white-space: nowrap">
<div id="one" class="kids">
<span>Hi</span>
</div>
<div id="two" class="kids">
<span>Bob like to play on his violin</span>
</div>
</div>
with CSS:
#parent {
background-color: #aaaaaa
}
#one {
background-color: #ff0000
}
#two {
background-color: #00ff00
}
.kids {
display: inline-block;
padding: 2px;
white-space: normal;
}
How can I make div #two wrap earlier so that I can keep both child divs inside the parent div?
Just remove the width attached to the parent. It forces the parent div to increase its height to accomodate the content in the div #two. SO keep the parent div as such:
<div id="parent" style="display: inline-block; white-space: nowrap">
And this should do the trick for you.
Alternately, you could add a min-height to the parent div so that it automatically accomodates its width based on the content inside its child. So your parent div could look like this:
<div id="parent" style="min-width: 150px; display: inline-block; white-space: nowrap">
Hope this helps!!!
EDIT: Your child divs already wraps inside the parent div. This is 'revealed' when you add a small width to one of the child div named two.
See that here : http://jsfiddle.net/K2xn5/
If you want you div two to wrap within the parent div, then there's no point in attaching a fixed width to the parent. Instead, you will need to provide a fixed width to the div named two. This would then occupy the space AS DEFINED by the content. Your parent div would then just keep expanding based on the size of its children, in this case, div one and two.
Check out these fiddles :
Fixed width to child, no width to the parent: http://jsfiddle.net/K2xn5/1/
Child div wrapping itself based on the size of its content: http://jsfiddle.net/K2xn5/2/ and http://jsfiddle.net/K2xn5/3/
Hope this helps!!!
Looks to me like both child divs are being wrapped correctly? They're both inside the gray 150px parent box.
BTW this short tutorial helped me a lot with my CSS learning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
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.