This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 4 years ago.
I use the following style to vertically and horizontally align content.
.middle_center{
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
However, if the content of .middle_center is larger than 50%, the left:50% applied means the width of .middle_center can only stretch to 50% of it's parent.
Here is a full code:
.parent{
position:relative;
background:#ff00ff;
width:800px;
height:300px;
}
.middle_center{
position:absolute;
background:#0000ff;
color:#fff;
padding:20px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div class="parent">
<div class="middle_center">This is some content. The left:50%; causes its width to be reduced to 50% of its parent's width.</div>
</div>
If I apply width: fit-content; then it works as expected. However this isn't supported by all browsers.
Does anyone know of a way to prevent the width from shrinking? It would like to add CSS only to the child element without adding styles to the parent if possible.
Here is a codepen link:
https://codepen.io/jonniejoejonson/pen/jvddPB
Make the element inline-block then center it horizontally using text-align:center and vertically using position:absolute considering an extra wrapper:
.parent {
position: relative;
background: #ff00ff;
width: 600px;
height: 200px;
border: 1px solid;
}
.middle_center {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.middle_center>div {
display: inline-block;
color: #fff;
padding: 20px;
background: #0000ff;
}
<div class="parent">
<div class="middle_center">
<div>This is some content.</div>
</div>
</div>
<div class="parent">
<div class="middle_center">
<div>This is some content. This is some content This is some content</div>
</div>
</div>
<div class="parent">
<div class="middle_center">
<div>This is some content. This is some content This is some content This is some content</div>
</div>
</div>
If you're trying to center the child horizontally and vertically, why not try using flexbox? An example of that with a blue box would look something like this:
.middle_center {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}
.blue_box {
width: 300px;
height: 300px;
background-color: #05c;
}
With the HTML like this:
<div class="middle_center">
<div class="blue_box"></div>
</div>
Here's a working example on JSFiddle.
if you try to center this using this technique then use the position:absolute; on that class (.middle_center) and give position:relative; to its parent.
Related
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
When having 2 divs, one on the left and one on the right.
Is it possible to have the right div aligned all the way right with a fixed width and have the left div take up all the space left?
I don't want to work with inline-
You can use CSS calc() function here to minus the width of fixed .right div from .left div.
The calc() CSS function lets you perform calculations when specifying
CSS property values.
#bx{
background:black;
height:200px;
padding:10px;
}
#bx > .left{
display:inline-block;
width:calc(99% - 200px); /*Minus width of .right using calc()*/
height:100%;
background:yellow;
}
#bx > .right{
display:inline-block;
width:200px;
height:100%;
background:red;
}
<div id="bx">
<div class="left">Left Div</div>
<div class="right">Right Div Fixed Width.</div>
</div>
There are plenty of ways to achieve this, but you may want to use flex-boxes as it's widely used these days.
Check caniuse to see if it meets your browser requirements.
Markup:
<div class="container">
<div class="left-container">Autofill remaining width</div>
<div class="fixed-container">200px</div>
</div>
CSS:
.container{
display: flex;
}
.left-container {
background-color: red;
flex: 1;
}
.fixed-container {
flex-basis: 200px;
background-color: yellow;
text-align: center;
}
Demo
I think this accomplishes what you are after but I'm not sure its the best way...
.container {
width: 100%;
height: 200px;
background-color: green;
}
.sidebar {
float: right;
width: 200px;
height: 200px;
background-color: blue;
}
.content {
background-color: red;
height: 200px;
margin-right: 200px;
}
<div class="sidebar">width: 200px</div>
<div class="content">
</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.
My goal is to put div with width=100vw, after that div there should be second div with width for example 300px (so that second div should be out of screen). I tried many things with float, display inline and so on, now I don't have any more ideas.
<div id="div1"></div>
<div id="div2"></div>
Here is fiddle with example code
https://jsfiddle.net/kg5ea4sc/5/
You can use white-space: nowrap on parent element and display: inline-block on two inner elements. Also maybe you want to add vertical-align: top so it will look like this Fiddle
.element {
white-space: nowrap;
}
#div1{
background: green;
display: inline-block;
width:100vw;
height: 80px;
}
#div2{
background: red;
display: inline-block;
width:300px;
height: 100px;
}
<div class="element">
<div id="div1"></div>
<div id="div2"></div>
</div>
https://jsfiddle.net/guanzo/kg5ea4sc/18/
The second div is outside of the screen. You'll have to manipulate either it's position or the overflow:hidden property on the container if you want to see it though.
HTML
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
#div1{
background: green;
width:100vw;
height: 80px;
}
#div2{
background: red;
width:300px;
height: 100px;
}
div{
display:inline-block;
}
#container{
width:100vw;
white-space:nowrap;
overflow:hidden;
}
Here is my fork of your fiddle: https://jsfiddle.net/nyzvbvo7/1/
You can scoll to the right to see the second div
What I changed:
I added
body {
width: calc(100vw + 300px);
margin: 0;
}
#div1, #div2 {
display: inline-block;
vertical-align: top;
}
So I made the body wide enough to hold both containers and set the container's display to inline-block. vertical-align: top; can be left out, the the containers will be algned at their baseline (which can vary depending on the content)
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 am trying to make a series of DIV elements sit side by side. Howeever i am running into problems
HTML:
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
CSS:
#comic{
height: 563px;
width: 1000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
.comic_panel{
width:1000px;
height:563px;
position:relative;
float:left;
background:orange;
}
However the result I get is simply the DIVS displaying under neath one another.
Your divs are too wide to fit side by side in the container. Try giving them a width of 200px:
.comic_panel{
width:200px;
height:563px;
position:relative;
float:left;
background:orange;
}
If you want for a scroll bar to appear, use white-space:nowrap; on the container and display:inline-block on the children.
Here is a demonstration: http://jsfiddle.net/h2StP/show
Change the CSS to below,
.comic_panel{
width:6%;
height:563px;
position:relative;
float:left;
background:orange;
border:1px solid red;
}
and they should fall side by side.
Basically child divs have same width as parent , so there is no room for them to sit side by side.
DEMO
The reason is that each inner divs (.comic_panel) are using all the width of the parent container (#comic). Then, the next div can only be place right below the previous one.
If you tune up the widths, you can have your result.
For example, if you let the container div have any width, you would have all the inner divs side by side: http://jsfiddle.net/
body {
width: auto;
overflow: auto;
width: 10000px;
}
#comic{
height: 563px;
background: black;
margin: auto;
color:white;
overflow: visible;
}
.comic_panel{
border: 1px solid black;
width:100px;
height:63px;
float:left;
background:orange;
}
To make the inner divs not wrap, you need to either set the width of the body element to a proper value (to make space for all the inner divs) via a hard-coded width css property (as in the fiddle, but not the best approach) or via javascript (a better approach).
This post explains other approaches, using tables: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/.
BTW, you may not need the position: relative that you put there to achieve this effect.
Put the whole thing into a container div like this:
<div id="container">
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
</div>
The container div should be the same size as your 'comic' div was before:
#container {
height: 563px;
width: 1000px;
overflow: auto;
}
And the width of your 'comic' div should be 14000.
#comic{
height: 563px;
width: 14000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}