I am new to bootstrap and web development. I wanted to make a responsive div which always maintains a length to width ratio of 16:9. With a header and footer section above this responsive portion. But the header and footer sections are stacked up on each other. Any help would be appreciated.
html
<div class="post-card-outer">
<div class="post-card-inner">
<div class="space-header">
</div>
<div class=" post-content">
<div class="col-sm-6 content-leftcol">
<div class="image-sec-post-card">
<img class = "image-post-card" src="3.jpeg">
</div>
</div>
<div class="col-sm-6 content-rightcol">
right
</div>
</div>
<div class="space-footer">
GGDYGDYGDYGDYGYDGDGYD
</div>
</div><!--post-card-inner-->
</div><!--post-card-outer-->
css
.post-card-outer{
width: 100%;
padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/
position: relative;
background: coral;
margin-top:50px;
}
.post-card-inner{
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.space-header {margin-top:-10px; height:10px; background-color:red;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;}
.post-content{
min-height:100%; background-color:green;
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.content-leftcol{
background-color:black;
width:50%;
height:100%;
}
.content-rightcol{
background-color:blue;
width:50%;
}
.image-sec-post-card{
border:1px solid white;
vertical-align: middle;
overflow: hidden;
}
.image-post-card{
max-width:100%;
max-height:100%;
border:1px solid green;
}
Well if your header is meant to be at the very top and your footer is meant to be at the very bottom of the page/element then youR could use absolute or fixed positioning.
When you use absolute positioning the element is automatically set to the top-left of the window/element. You can think of it as a (0,0) positioning on a grid. Once you tell the element to be positioned absolutely you can use the TOP, RIGHT, BOTTOM, and LEFT properties. These properties directly influence the origin of your element. For example Top:0 will place your element at the very top of the window and Bottom:0 will place your element at the very bottom of the window. If you wanted to put a little space in between the element and the side of the window then you could simply increase the number. Top:20px or Top:2vh
Fixed positioning is nearly the same except your element will be static and wont move even if you try to scroll up or down. This is how you achieve fixed navigation bars and fixed footers.
.space-header {margin-top:-10px; height:10px; background-color:red;top:0;position:absolute;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;bottom:0;position:absolute;}
body{ margin:0; padding:0; color:#fff;} .space-header {height:50px; background-color:red;} .space-footer {height:50px; background-color:red;color:white;} .post-content{min-height:100%; background-color:green;} .content-leftcol{background-color:black;width:50%;height:47vw; float:left;} .content-rightcol{background-color:blue;width:50%;height:47vw; float:left;} .image-sec-post-card{border:1px solid white;vertical-align: middle;overflow: hidden;}.image-post-card{max-width:100%; max-height:100%; border:1px solid green;} .clearfix{clear:both; float:none;}
<body><div class="space-header">Header
</div>
<div class="clearfix"></div>
<div class=" post-content">
<div class="col-sm-6 content-leftcol">
<div class="image-sec-post-card">
<img class = "image-post-card" src="3.jpeg">Left
</div>
</div>
<div class="col-sm-6 content-rightcol">
right
</div>
<div class="clearfix"></div>
<div class="space-footer">
Footer
</div>
</div> </body>
Related
I have different images encapsulated in square style blocks that I would like to always center in but I'm having a heck of a time trying to get them to do so.
I made an example of what's happening to me in similar design. Notice the product (the grill) is not actually centered in the imgblock container.
This starts to become very apparent with other product images that are much wider than narrow.
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
max-height:100%;
max-width:100%;
margin:auto;
display:block;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
First set the image to full width and height (or as desired). Now you can add object-fit: contain to contain the image to the imgBlock and now use object-position: center to align it - see demo below:
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
height:100%; /* set full height */
width:100%; /* set full width */
display:block;
object-fit: contain; /* constrains the image maintaining aspect ratio */
object-position: center; /* default position is center - so optional in this case */
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
You can use the older positioning attributes as well as the Flex techniques. Make the main block position relative. Then set the img inside that block to position: absolute. Place that block element to top: 50% left: 50% of the parent element. Since this goes by the top left corner it will be slightly of the center. We will then use transform: translate(-50%, -50%) to bring it back to the true center.
More on position here at the MDN.
.imgBlock {
position: relative;
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height:100%;
max-width:100%;
display:block;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
You can set position relative to your div .imgBlock.
After that set the position absolute to your <img/> with all coordinates to 0 and margin auto.
Remember that a position absolute is referred to the nearest parent with position relative.
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
position:relative;
}
.imgBlock img{
max-height:100%;
max-width:100%;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
You can add display: flex to imgBlock, then center horizontally with justify-content and vertically with align-items.
.imgBlock {
display: flex;
align-items: center;
justify-content: center;
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
max-height:100%;
max-width:100%;
margin:auto;
display:block;
}
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
Please look at this JsFiddle.
JSFiddle
<div class="main" >
<div class="menufixedleft">
Fixed Menu Should not Scroll
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
I am trying to have a menu div on the left fixed, content on center and sidebar on right.
It's not working when i have the center and right side bar, float left. The center div overlays the fixed div on the left.
Is my only option is to float the 2 divs(center and right sidebar) to the right ?
Thanks !
Make room for the fixed element by giving main either padding-left:100px; or margin-left:100px depending on how you want it to look (The 100px comes from how wide the fixed element is)
Updated jsFiddle
Check out this JSFiddle: http://jsfiddle.net/J2tt6/1/
Here's the CSS code:
body {
padding: 0;
margin: 0;
}
.main{
height:500px;
width:550px;
background:pink;
position:relative;
}
.menufixedleft{
height:200px;
width:100px;
position:fixed;
left:0;
top:20px;
background:green;
}
.content{
height:400px;
width:200px;
background:blue;
position: absolute; /* should not float, as fixed elements are above everything else. */
left: 100px;
}
.rightsidebar{
height:200px;
width:100px;
background:red;
position: absolute; /* once again, don't float. */
left: 300px;
}
When you set position: fixed to your left navigation, it is taken out of the layout. To keep it in, you will need to contain your menu in another element, which remains in the layout.
HTML:
<div class="main">
<div class="menu">
<div class="affix">
Fixed Menu Should not Scroll
</div>
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
CSS:
.menu {
float: left;
min-height: 1px;
width: 100px;
}
.affix {
height: 200px;
width: 100px;
position: fixed;
left: 0;
top: 20px;
background: green;
}
JS Fiddle
I have two divs under menu of site: content and right-content.Right content is sidebar which is fixed to the right side of screen,and he has a wiht 200px.Content is div for content of site and I want him to start on the left side of the screen and to stop when it reaches the right-content.Some suggestions?
HTML code of DIVs:
<div id="content">
</div>
<div id="rightcontent">
bla vlaaa
</div>
CSS code:
#content {
float:left;
position:absolute;
background-color:#ffffff;
height:500px;
}
#rightcontent {
margin-top:5px;
border:1px solid;
border-color:#ffffff;
border-radius:5px;
float:right;
position:relative;
background-color:#D4D3D0;
width:300px;
height:500px;
}
You can use a wrapping div for the content, and padding or margins to do this. For example, the style sheet could look something like this:
.div-content-wrapper {
width: 100%;
}
.div-content {
margin-right: 200px;
}
.div-rightsidebar {
width: 200px;
position: fixed;
right: 0;
top: 0;
}
And the html would look like this:
<div class="div-content-wrapper">
<div class="div-content">
<h1> This content will not go further than 200px from the right side</h1>
</div>
<div class="div-rightsidebar">
<h4>Right bar content</h4>
</div>
</div>
The right sidebar can go inside or outside of the wrapper, it doesn't really matter.
I'm making some mobile HTML & would like to have a div that uses up 100% of the space it has, but not use up its container and in it have 3 divs that split it up into 3 parts and have the following layout:
How can I do this using divs, I've tried to but having percentage and fixed height divs is confusing. I can do it with horizontally aligned ones, but vertically it confuses me. I don't want it to overlap by making the bottom one absolute.
Edit
The remaining space is essentially just one big div that has an overscroll-y that uses up the whole space
I have to place the layout in the section underneath the titlebar which is why I cant use position: fixed because it will interfere with the parent container.
First of all, the image in your edited question probably came from JQuery Mobile. Consider using jQuery mobile. It could be an option too.
<style type="text/css">
#container{position: relative; width: 100%; height: 100%; background-color:#ddd; z-index:1;}
#header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;}
#footer{position: fixed; bottom:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:4;}
#content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;}
</style>
<div id="container">
<div id="header">
</div>
<div id="content">
Put body content here...
</div>
<div id="footer">
</div>
</div>
You might need jQuery to spice it all up. This should give you the basic idea.
http://jsfiddle.net/wy6rS/1/
<div id="toolbar">This is fixed toolbar.</div>
<div id="wrap">
<div id="header">This is the header</div>
<div id="content">Content will Expand with scripting. Notice the push.</div>
<div id="push"></div>
<div> <!--wrap ends here-->
<div id="footer">This is the footer</div>
The push makes room for the sticky footer. Notice equal negative margin on #wrap.
#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; }
#toolbar { position:fixed; top:0; width:100%; height:50px; }
#header { height: 140px; }
#content { min-height:300px; height:100%; }
#push, #footer { height:80px; } /* Must be same height as footer */
Then you'll need script to expand the content. Check the jsfiddle. It will work in a real page.