I'm trying the achieve the following setup for a page, where there is a left and right div and a 'floating' image in the center above the two divs:
I've tried giving the img1 a z-index and a position: relative (or position: absolute for that matter) but that didn't help achieve my goal. Any takes on how to float an image above these two divs, centered?
I'm using the following pieces of code currently:
CSS http://pastebin.com/4uLHwkXt
HTML http://pastebin.com/t6yCTR0r
Assign position: relative; to DIV1 and the following settings to .IMG1. .IMG1 has to be inside DIV1 (i.e. be a child of DIV1) for this to work.
.IMG1 {
position:absolute;
right: 0;
top: 30px; /* adjust as needed */
transform: translateX(+50%);
}
addition: You hadn't posted your code before, so I just described the basic necessary settings with the element names from your graphic description, but that should be clear enogh.
Try this code: You can adjust the div widths and margins according to your requirement. This code also adjust according to the desktop screen.
Thanks
CSS:
.floatedDiv{
float:left;
width:50%;
background:grey;
height:50px;
}
.imgDiv {
width: 20px;
height: 20px;
position: absolute;
background: green;
left: 50%;
margin-left: -10px; /*half of the length of the div*/
top:15px;
}
.red{
background:red;
}
HTML:
<body style='margin:0px;'>
<div class='floatedDiv red'></div>
<div class='floatedDiv'></div>
<div class='imgDiv'></div>
</body>
In my case I position:absolute the image and add position:relative to the parent div.
HTML (with bootstrap)
.col-6{ height:500px; }
img{
margin-left:33%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:relative;">
<div class="col-6 bg-success"></div>
<div class="col-6 bg-warning"></div>
<img src="https://picsum.photos/200/150?grayscale" style="position:absolute;">
</div>
Related
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.
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>
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'm trying to float two 'navigation' elements on either side of some content. These elements should stay in place (and visible) as a user scrolls down a page.
Example: (see less than and greater than signs): http://jsfiddle.net/dbough/tASs2/
I've tried to 'fix' both elements in place with position:fixed, but it causes the elements to collapse together
Example: http://jsfiddle.net/dbough/tASs2/1/
Looking for direction on how to make this work.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="nav">
<span id="nav_left"> <</span>
<span id="nav_right"> ></span>
</div>
<div id="content">
SOME CONTENT
</div>
</div>
</body>
</html>
CSS (without fixed positioning)
#container{
width:100%;
height:100%;
margin:auto;
padding:auto;
max-width: 400px;
}
#content{
margin:auto;
padding:auto;
}
#nav_left, #nav_right{
max-width: 10px;
font-size: 200%;
}
#nav_left {
margin-left:-10%;
}
#nav_right {
float:right;
margin-right:-10%;
}
Give position:absolute to arrow classes and relative to the parent div #container
#nav_left {
left:0; position:absolute
}
#nav_right {
right:0; position:absolute
}
DEMO
For Fixed Arrows
Use a relative div inside the fixed div and align the child div by position:absolute
HTML
<div id="nav">
<div id="wrap">
<div id="nav_left">< </div> <div id="nav_right"> ></div>
</div>
</div>
CSS
#nav{position:fixed;
width:100%;
height:40px;
}
#wrap{
position:relative;
width:100%;
height:40px;
}
#nav_left {
left:15%;
position:absolute
}
#nav_right {
right:15%;
position:absolute
}
DEMO 2
Or in simple method give direct position:fixed to the child divs and remove the outer divs
HTML
<div id="nav_left">< </div> <div id="nav_right"> ></div>
CSS
#nav_left {
left:15%;
position:fixed
}
#nav_right {
right:15%;
position:fixed
}
DEMO 3
When using position: fixed you should be using the top/bottom/right/left attributes too and not use float or margins. See the W3C CSS spec about position.
See http://jsfiddle.net/pqbkN/
I this case you should change your arrow spans to:
#nav_left {
/*margin-left:-10%;*/
left: 2em;
top: 1em;
}
#nav_right {
/*float:right;*/
right: 4em;
top: 1em;
/*margin-right:-10%;*/
}
Use for fixed version at #nav-right not margin-right:10% but right:10%.
I've spent way too long trying to work out how to do this!
I have two floated divs in a margin 0 auto container, top-left and top-right.
I have two absolute positioned divs that stick to either side of the window and meet each other at some point, bottom-left and bottom-right.
So my problem is, I want the meeting point of top-left and top-right divs to always be inline with the meeting point of bottom-left and bottom-right.
HTML:
<div id="container">
<div id="top-left">Top Left</div>
<div id="top-right">Top Right</div>
</div>
<div id="bottom-left">Bottom Left</div>
<div id="bottom-right">Bottom Right</div>
CSS:
#bottom-left {
position: absolute;
left: 0;
height: 70px;
right: 45%;
}
#bottom-right {
position: absolute;
right: 0;
height: 60px;
left: 55%;
}
#container {
margin: 0 auto;
width: 200px;
overflow: hidden;
}
#top-left {
width: 125px;
float: left;
}
#top-right {
width: 75px;
float: left;
}
JS Fiddle of example http://jsfiddle.net/JECyC/1/ If you change size of the window, the meeting points drift apart!
I may be approaching this in the wrong way, so I'm open to a completely different solution!
Cheers.
Edit 1:
Screenshot, I need to make sure that the divs corners always meet.
#top-left {
background-color:yellow;
width:68%;
float:left;
}
#top-right {
background-color:blue;
width:32%;
float:left;
}
Something like this ... I just don't see another way.
Your top-left and top-right have fixed width but bottom-left and bottom-right have variable width . so they will never be inline as if u keep reducing window size, top divs will be as it is and size of bottom divs will keep reducing so there will be point when both bottom divs have width equal to single top div n other div is not visible due to scrollbar.
You can try applying fixed width and margin auto to bottom div as u did with top div . if u want them always be inline.
Thank you
use this code i hope this will help for u
<html>
<head>
</head>
<body>
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style=" width:450; height:70px; background:yellow; float:left;">top left</div>
<div style=" width:450; height:70px; background:green; float:right;">top right</div>
</div>
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style=" width:450; height:70px; background:red; float:left;">botom left</div>
<div style=" width:450; height:70px; background:blue; float:right;">bottom right</div>
</div>
</body>
</html>