I a blue div set to display: inline-block; so that it shrink wraps to its content. I am trying to center the blue div in the middle of the red div.
hi
<div class="dim">
<div class="test">
<div> test </div>
<div> 2nd </div>
</div>
</div>
.dim {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:1 !important;
background-color:red;
opacity: 0.5;
}
.test {
border: solid;
display: inline-block;
background-color:blue;
}
Jsfiddle link to code
I tried this in your fiddle. It worked.
.test {
border: solid;
display: inline-block;
background-color:blue;
position: fixed;
margin-top: 50%;
margin-left:50%
}
It will break once you resize the div. If you don't set a size to your div, the only way it will stay in the center without an stablished size is with JavaScript.
But, you don't have to look too hard to find better answers.
Related
I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).
My HTML mark up is like:
<section id="mySection" >
<header id="headerTop">
</header>
<div id="wrapperLeft">
</div>
<div id="wrapperRight">
</div>
<footer id="footerRight">
</footer>
</section>
My CSS is
#mySection
{
margin:0 auto;
padding:0;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
#headerTop
{
position:absolute;
top:0;
left:0;
height:40px;
width:100%;
overflow:hidden;
}
#wrapperLeft
{
position:absolute;
top:40px;
left:0;
width:30%;
bottom:0;
overflow:auto;
}
#wrapperRight
{
position:absolute;
top:40px;
left:30%;
width:70%
bottom:30px;
overflow:auto;
}
#footerRight
{
position:absolute;
left:30%;
bottom:0;
width:70%;
overflow:hidden;
}
I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.
Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width.
I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.
Thanks in advance for your help.
I would add a wrapper to the divs so you can float then instead of positioning then absolutely. This way you can make at least one div 100% wide. For instance the right div. If you want both divs to be dynamic in size you will have to use jquery. For instance adding classes if you want to keep the jquery to a minimal.
example HTML:
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
example CSS :
#main{
position:relative;
overflo:hidden // This will make the container grow with the children
width:960px;
}
#left{
width:200px;
float:left;
height:100%;
}
#right{
float:left;
width:100%;
height:100%;
}
Example of CSS with additional classto toggle divs
#main.only-left #left{
width:100%;
}
#main.only-left #right{display:none;}
I think I know what you're talking about. I've created a little example here. Basically set 30% on the sidecolumn, and display: block; on the main column. Click on the body anywhere to toggle the side column to show how the main column adapts... is this going in the right direction?
Codepen sketch
HTML
<div class='wrapper'>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<article>Main article</article>
</section>
<footer>Footer</footer>
</div>
CSS
body {
margin: 0;
padding: 0;
}
section {
overflow: hidden;
position: relative;
}
header {
background: crimson;
height: 100px;
width: 100%;
}
aside {
background: #efefef;
float: left;
height: 300px;
width: 30%;
}
aside.hide { display: none; } /** For demo purposes **/
article {
background: #ccc;
display: block;
height: 300px;
}
footer {
background: crimson;
float: right;
height: 100px;
width: 70%;
}
jQuery (just for hideToggle example)
$('html').on('click', function(){
$('aside').toggleClass('hide');
});
UPDATE: Here's an example with a little assitance from jQuery for class toggling. Could probably be generalized more... http://codepen.io/kunalbhat/pen/kuAcg
I think this is a classic one. I found a lot of similar questions but no answer.
I want to vertical center any image of any not-known height into a div with overflow:hidden
This is what I have right now:
.outer {
padding-top:49px;
height:49px;
width:280px;
overflow:hidden;
background-color:yellow;
}
.outer .inner {
float:left;
position:relative;
display:block;
background-color:blue;
}
.outer .inner img {
position:relative;
top:-50%;
width:280px;
height:auto;
border:0px;
display:block;
}
So the .inner is pushed to the center of the .outer by padding-top, so I get a "window" of 2 x 49px = 98px height. Then the img I thought would be pushed out 50% from the .inner height but for some reason i get a different number…
Does anybody know what I am doing wrong?
Thank you in advance!
I faced a similar situation and solved it with a different approach.
For that I used the image as a background image of a div.
Code sample
<head>
<style>
div.imgbox1{
width: 160px;
height: 110px;
overflow: hidden;
background-position: 50% 50%; /* for vertical and horizontal center alignment*/
}
</style>
</head>
<body>
<div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
</div>
</body>
If using img tag isn't a must you can try this
First things first... An explanation of why you are getting the result you are getting. This is quite simple. Setting position: relative; (or absolute for that matter), and then setting top: 50%; aligns the very top of your image to 50%. If you make the height of your image 1px, you can see that the 1px is centered. Unfortunately there is no way with CSS to tell it to align to the center of the image rather than the top edge.
Now... A possible solution...
Assuming that nothing else is going inside this .inner div, have you considered allowing the image to determine the inner div's height via a margin?
Take for example this JSFiddle.
You can "center" the image inside the .inner div, by setting margin left and right to auto, and margin top and bottom to some px value... In my example 60px.
If you want to obtain a total div height of 600px, and your image is always 400px tall, then a margin top and bottom of 100px makes a total height of 600px. (400+100+100=600).
HTML:
<div class="outer">
<div class="inner">
<img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
</div>
</div>
CSS:
.outer {
height:520px;
width:520px;
overflow:hidden;
background-color:yellow;
border: 2px solid purple;
}
.outer .inner {
width: 340px;
display:block;
background-color:blue;
border: 1px solid red;
padding: 10px;
margin: 0 auto;
}
.outer .inner img {
width:280px;
height:auto;
margin: 60px auto;
border:0px;
display:block;
border: 1px solid orange;
}
A second possible solution...
Assuming that the <img> tag does not HAVE to remain an <img> tag, then a very simple way to do this is to move the image itself to CSS, as a background-image.
See this JSFiddle for a demonstration of this solution.
HTML:
<div class="inner">
</div>
CSS:
.inner {
width: 540px;
height: 340px;
display:block;
background-color:blue;
border: 1px solid red;
margin: 0 auto;
background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}
I´m trying to set a background color on a div that is stretched (using negative margins) to the full width of its outermost parent div.
Here´s a simplified example: http://jsfiddle.net/U5dnd/
The white div .featured-wrapper covers the full width of the black div .site, but its background color doesn´t. I suppose the margins are transparent.
Is there a way to make the whole .featured-wrapper div white, including its (negative) margins? (Or is there another way to accomplish this?)
Thanks!
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0px 0 0px;
position:absolute;
width:100%;
z-index:100;
left:0;
}
Check this
JS Fiddle
CSS:
.site {
background-color:black;
padding: 0 40px;
height:300px;
width:320px;
}
.site-content {
width:100%;
overflow:hidden;
}
.wrapper {
overflow:hidden;
background-color:red;
height:100%;
}
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0 0 -40px;
position: absolute;
width: 399px;
}
HTML:
<div id="page" class="site">
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div class="featured-wrapper">
<p>This is the featured wrapper</p>
</div>
</div>
</div>
</div>
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>
I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for.
I would like to convert this to a tableless layout.
Note: header and footer have to be set to a fixed height in pixels (50px is ok).
The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.
You can do it with table style CSS properties, but still retain table less markup (which is still a win).
Example
HTML
<div id="container">
<div id="header"><div>header</div></div>
<div id="content"><div>content</div></div>
<div id="footer"><div>footer</div></div>
</div>
CSS
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
jsFiddle.
'Multiple absolute co-ordinates' is a nice way to achieve this. This is when you absolutely position a box, then give it both top and bottom co-ordinates. Without specifying a height, you get a box which wants to be 10px from the top, and 10px from the bottom edges of its parent.
Here's an example
There is an IE6 specific style you'll need to add, if you care about that browser.
Here's an article on the technique (plus the IE6 fix) - it's a good one to know, even if you don't use it for this problem.
You haven't said anything about heights of your sub elements, so I have had to make some presumptions. You could use percentages if you wanted.
<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}
#header {
height:15%;
width:100%;
background-color:red;
}
#center {
height:75%;
width:100%;
background-color:blue;
}
#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>
<body>
<div id="mainContainer">
<div id="header">Header</div>
<div id="center">Center</div>
<div id="footer">Footer</div>
</div>
</div>
</body>