I have a container div and a content div.
markup:
<div id="container">
<div id="content">
<pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
css:
#container {display:table; border:solid red 2px; width:400px; height:500px; background-color:#aaa;}
#content {display:table-cell; height:200px; width:200px; vertical-align:middle; background-color:#444}
I want to vertically align the content div, but not have it take the complete height of the container div.
Now I see other solutions for this, the ones that use 3 div's - outer, middle, inner- I don't want to do that- just 2 divs.
While the above thing works- the height of the content div is ignored- possibly because of the table-cell display value, and it fills the entire container div. How to rectify this??
Remove the display:table-cell css from your #content id css selector, then the 200 height is respected. And you have a typo in your height: 200px width:200px there is no semi-colon separating the two values, so the width is not getting applied.
#container {
display:table;
border:solid red 2px;
width:400px;
height:500px;
background-color:#aaa;
}
#content {
/*display:table-cell;*/
height:200px;
width:200px;
vertical-align:middle;
background-color:#444
}
<div id="container">
<div id="content"> <pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
Related
I am using the Bootstrap .container class to center content on the screen and fix it's width at something suitable for the viewport. That's fine, however I now want to wrap that container in a single, centered column that has 100% height. I want the height to be at least 100% of the viewport. It should expand when the content does not fix on a single screen.
I have looked at general solutions that set the height of the html and body element to be at least the height of the screen, but these do not seem to work in Bootstrap. I suspect it has something to do with box-sizing set to border-box.
Here is an example of the html:
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
Use min-height: 100vh.
vh is a viewport unit: 1 vh is equal to 1% of the height of the display.
I don't know if this really help you. I can't put a bootstrap in this fiddle, I just don't know how to do that. So will you please do this on your own console, i did this trick to get my content 100% height.
here we go:
html{
margin:0;
height:100%;}
body{
display:flex;
flex-direction:column;
height:100%;
padding:0;
margin:0;
background:yellow;
}
header{
flex:0 1 80px;
background:#ddd;
}
section#containerWrap{
flex:1 1 auto;
height:100%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background:#ccc;
position:relative;
}
section#containerWrap .container{
height:100%;}
footer{
flex:0 1 40px;
background:#999;
}
<body>
<header>header is about nav and logo</header>
<section id="containerWrap">
<div class="container">
<p>very long content should be flexible in here</p>
<p>very long content should be flexible in here</p>
<p>very long content should be flexible in here</p>
</div>
</section>
<footer>the footer, website map, and more like contact us</footer>
</body>
it will set your footer absolutely in the bottom of the screen, you don't need to set the footer it self to position absolute or fixed what i did is, i stretch the container and take the rest of the height from header and footer.
maybe i can say it something like this
container height - (header height + footer height).
wish it will help you.
try this code for your problem
body,html{
height:100%;
}
.my-col{
height:100%;
background:green;
}
.container{
height:100%;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" />
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
have a look on codepen also
http://codepen.io/anon/pen/jyObgP#anon-login
I'm creating an image slider. I have a parent <div> that will mask a wider child:
<div class="viewport">
<div class="strip">
<div class="item">
<img src="1.png">
</div>
<div class="item">
<img src="2.png" >
</div>
<div class="item">
<img src="3.png">
</div>
</div>
</div>
My parent has a fixed width, and will show scrollbars when content overflows:
.viewport{
width:400px;
height: 100px;
overflow:scroll;
margin-top:100px;
}
Its child, .strip, should expand to contain all of its children as a horizontal row. In the past, to ensure .strip could contain its children without clearing, I would either:
sum up the widths of a pre-determined number of children and hardcode it
sum of the widths of an unknown number of children via javascript
Since I'm targeting modern browsers, I thought maybe the problem could be solved with using flexbox:
.strip{
display: flex;
height:100px;
}
.item{
width:150px;
flex-basis:150px;
margin-right:10px;
}
It gets tantalizingly close, but all my items are stacked on top of one another:
http://jsfiddle.net/rytPP/14/
Is there someway to space them out, or is there no way to get around .viewport's width constraint?
How about just using display:inline-block; for the .item and white-space:nowrap; for the .strip?
.strip{
height:100px;
white-space:nowrap;
font-size:0;
}
.item{
width:150px;
display:inline-block;
margin-right:10px;
}
As per this fiddle...
That way you're not restricted to flexbox-supporting browsers.
I have some floated divs in a wrapper, they should be side buy side and a fixed width. However as together the child divs are wider than the parent div this has been set to overflow:hidden;
My problem is I have to set the width of the parent div to accommodate the combined width of the child divs otherwise they are pushed onto a new line by the lack of available width.
I would like to not have to set the width of the wrapper div if possible as the child divs will be added dynamically.
Css:
.shell{
width:900px;
}
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
width:1000px;
}
.cont{
width:500px;
float:left;
position: relative;
}
Html:
<div class="shell">
<div class="wrap">
<div class="cont">
</div>
<div class="cont">
</div>
</div>
</div>
Note: The relative:position; must be kept for other reasons.
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
min-width:1000px;
width:auto;
}
if you want to view them side by side , then you should consider using inline-block
that is why we use min-width , just to initiate a width
I have 3 divs vertically. The first should have 100% width, the second should have an image with width 283px, and third div should have 100% width.
Does anyone know how to position the image div in the middle of two others divs 100%?
I've tried this, but dont works for me
<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
.first{
width:100%;
float:left;
background:yellow;
}
.third{
width:100%
float:right;
background:pink;
}
.second{
width:283px;
overflow:hidden;
background:blue;
}enter code here
If your intention is to position the divs next to each other horizontally than you can't have any of them set to a width of 100% as the total of all elements next to each other can only total 100%.
If your website will be fixed width than your easiest solution would be to set the width of the left and right div in pixels to the (width of the site - 283) / 2. Then they would float next to each other. You could also do this with %.
However if your site is fluid width, then you would need to work out a percentage for all 3 divs i.e 33% each but this would mean the middle won't be exactly 283px.
The only way I can think to make this work exactly as you want would be to use Javascript to resize the elements after the page load which could then get the browser dimensions and work it all out.
Having read it a few times i think i get what you want to do.
You want he middle div to be centred between the two other divs.
you need to give the div a class something like this:
.middlediv
{
width: 283px;
margin-left: auto;
margin-right: auto;
}
which can also be written like this:
.middlediv
{
width: 283px;
margin: 0px auto;
}
Your question isn't clear, so I've done both possible interpretations: http://jsfiddle.net/EbBzY/
HTML
<h1>Option 1</h1>
<div class="main">
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</div>
<h1>Option 2</h1>
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
CSS
.main{
display:table;
width:100%;
margin-bottom:100px;
}
.main .content{
display:table-row;
}
.main .content div{
display:table-cell;
}
.first{
background:yellow;
}
.third{
background:pink;
}
.second{
background:blue;
width:283px;
margin:auto;
}
kind of embarrassing to ask but I have been toying with it for the past 1 hour at least and cannot get it correctly.
Need 2 div layout.
Div 1 floated left with a fixed width of 75px
Div 2 floated right with a fixed width of 900px
Now the problem: the margin between div1-div2 and div2-right outer edge needs to be equal.
Try putting "div 2" in a container that isn't floated. Then remove "div 2"'s float and instead use display:inline-block. Add text-align:center to the new container of "div 2".
HTML:
<div class="div1"></div>
<div class="container">
<div class="div2"></div>
</div>
CSS:
.div1{
float:left;
width:75px;
height:100px;
background-color:red;
}
.container{
padding-left:75px;
}
.div2{
margin:auto;
width:500px;
background-color:blue;
height:100px;
}
DEMO