I have 3 divs in my footer, those divs are used for footer and you can see them horizontally on the bottom of the page.
<div class="footer-text footer_mainDIV">
<div class="footer_leftDIV">
All rights reserved
</div>
<div class="footer_middleDIV">
Help
</div>
<div class="footer_rightDIV">
Version 6.0
</div>
</div>
with css:
.footer_mainDIV {
position: relative;
width: 100%;
border-top: 1px solid #eeeeee;
margin: auto;
}
.footer_leftDIV {
text-align: left;
position : absolute;
top: 0px;
left: 20px;
height: 50px;
width: 33%;
margin: auto;
}
.footer_middleDIV {
height: 50px;
width: 33%;
margin: auto;
}
.footer_rightDIV {
text-align: right;
position: absolute;
top: 0px;
right: 20px;
height: 50px;
width: 33%;
margin: auto;
}
What is the way to make my divs from horizontal view to vertical when minimizing the browser using css?
I need the divs to become vertically when the browser is minimized and there is not enough width to see them horizontally.
Thanks,
You can use media query to achieve this. For example i have targeted 480 pixels.
#media all and (max-width: 480px)
{
.footer_leftDIV, .footer_middleDIV, .footer_rightDIV
{
width:100%;
position:relative;
text-align:left;
left:0;
}
}
SAMPLE DEMO
you can update your given css with it
.footer_mainDIV {
position: absolute;
width: 100%;
border-top: 1px solid #eeeeee;
margin: auto;
bottom: 0px;
left:20px;
}
.footer_leftDIV {
text-align: left;
height: 50px;
width: 33%;
float:left;
}
.footer_middleDIV {
height: 50px;
width: 33%;
float:left;
}
.footer_rightDIV {
float:left;
height: 50px;
width: 33%;
}
But add it in a relative property div i hope it will work for you.
Related
I know this has been asked many times before but I simply can't follow the instructions on these other topics. Nothing seems to be working for me. Please check the screenshot to get a better understanding of what I'm trying to accomplish. Also, I added my code to this post. Thanks!
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
it's worth noting that you could also accomplish this easily with flexbox, like so:
header {
width: 960px;
height: 90px;
background-color: #000;
display:flex;
justify-content: center;
align-items: center;
}
.logo {
width: 209px;
height: 54px;
background-color: #ced0d8;
}
browser support is pretty good
Method 1
Using position:relative; and top:50 and transform: translateY(-50%) you can get it centered, this is so good if you don't know the height of the element, like this:
Support : IE9+ and all other browsers, caniuse.com.
JS Fiddle 1
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
position:relative;
width: 209px;
height: 54px;
top:50%;
left:0;
transform: translateY(-50%);
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Method 2: using .calc() css function ,if you know the height of the element, like this:
Support : IE9+ and all other browsers, caniuse.com
JS Fiddle 2
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
position:relative;
width: 209px;
height: 54px;
top:calc(50% - 27px); /* 50% parent height - 27px is half of 54px the height of .logo */
left:0;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Method 3: if you know both elements height, you can manually subtract half the height of the .logo from half of the height of the parent div, so 90/2 - 54/2 = 18, like this:
Support: All browsers, caniuse.com.
JS Fiddle 3
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
position:relative;
width: 209px;
height: 54px;
top:18px; /* 90/2 - 54/2 = 18 */
left:0;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Try this for your logo class:
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 209px;
height: 54px;
background-color: #ced0d8;
}
Have you heard of flexbox? It's great! Try this :
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
display: flex;
}
.logo {
width: 209px;
height: 54px;
background-color: #ced0d8;
margin: auto 0;
}
There is a 3 ways to solve this problem.
Method 1: Use transform property. ( IE9+ supported )
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
top:50%;
transform:translateY(-50%);
position:relative;
}
<header>
<div class="logo"></div>
</header>
Method 2: Use flex property. ( IE10+ supported )
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
display:flex;
align-items: center;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Method 3: Use margin property. ( IE3+ supported )
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
background-color: #ced0d8;
margin-top: 18px;
/* (90px (header height) - 54px (logo height))/2 = 18px; */
}
<header>
<div class="logo"></div>
</header>
There is a neat trick using absolute positioning as shown below.
Since you specified a height and width for .logo, you can use margin: auto to center it both vertically and horizontally provided that .logo is absolutely positioned and all the offsets are set to zero.
This relies on CSS2 specifications and will work in quite a few browsers.
header {
width: 460px; /* narrow width for demo... */
height: 90px;
margin: auto;
background-color: #000;
position: relative;
}
.logo {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
width: 209px;
height: 54px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
Just play around with the height and the padding of your header :
body {
margin : 0;
}
header {
width: 100%;
height: 54px;
margin: 0;
padding: 26px;
background-color: #000;
}
.logo {
display: block;
width: 209px;
height: 54px;
margin : auto;
background-color: #ced0d8;
border : 1px solid #000;
}
<header>
<div class="logo"></div>
</header>
See also this Fiddle!
There are many ways to vertically align an element, but in this case, where your <div> has an explicit height and sits inside a parent <header> which also has an explicit height, one of the simplest ways - supported by all browsers for the last decade and a half - is:
Apply an equal margin-top and margin-bottom.
header {
width: 960px;
height: 90px;
margin: auto;
background-color: #000;
}
.logo {
float: left;
width: 209px;
height: 54px;
margin-top: 18px;
margin-bottom: 18px;
background-color: #ced0d8;
}
<header>
<div class="logo"></div>
</header>
How to work out that the margin-top and margin-bottom should each be 18px?
(height of <header>) - (height of .logo) = 36px
36px / 2 = 18px
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!
FIDDLE
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .
so the following CSS :
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .
with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :
margin-left: // DO YOUR MATH.
padding-left: // DO YOUR MATH.
You already have height: 400px; on your over div so specify the height to #one too http://jsfiddle.net/ypL8ypsf/5/
#one {
position:fixed;
width:16%;
background: #666;
height:384px;
}
Hope this will help
This changes in css will solve your problem
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}
If you have position :fixed on an element. it can only controlled by the browser window, cannot control by parent div. so if you add width: 25% it fill up 25% of your browser window. not in parent div.
i have 2 solutions,
use javascript. dynamically add width in 'px' and add position:
fixed after
use position: absolute. instead of fixed. ( actually your height is 100% so it doesn't matter your position fixed. )
1nd solution: javascript approach [sample code]:
//remove position:fixed from #one
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var calWidth = $("#one").width(); //get the width
$("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>
2nd solution: CSS approach [sample code]
#wrap{
position:relative;
}
#one{
position:absolute;
}
Try overriding your current float and position styles with:
float: left; and
position: relative;
Instead of fixing that DIV, I've float them both to the left and give the second DIV overflow-y scroll property.
Hope this can help you:
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
}
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
overflow:hidden;
}
#two {
float: left;
width: 75%;
background: #333;
height: 100%;
overflow-y: scroll;
}
.clear {
clear: both;
}
If it is not usefull you always can try some framework with default sidebars.
Although you could add some margin to the second div to displace it to the right, I don't think you should use fixed for this.
You should do this:
<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.div1{
background: #DDD;
width:40%;
height: 100%;
float: left;
overflow: hidden;
}
.div2{
background: #EEE;
width:60%;
height: 100%;
float: left;
overflow-y:auto;
}
Here is a pen for you: http://codepen.io/vandervals/pen/bdBWJV
I managed to do what you want but by adding more div.
the HTML would be
<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>
and the css then
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}
Could any one help me around this piece of stupid code where I lost almost 2hours trying to figure out how to make it work. Goal is to center input field verticaly and horizontaly inside horizontal bar.
Here is a simplified code:
HTML:
<div class="navigationBar">
<input type="text" id="searchField">
</div>
CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#searchField{
margin; auto;
height: 25px;
width: 200px;
}
I've also tried with display modes, changing position types but no luck.
Here is the code
Adding a line-height wil make it centered vertically.
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#seachfield
margin; 0, auto;
height: 25px;
line-height: 40px;
width: 200px;
}
Answer is simple, just remove padding for #nav element and set his height and line-height to 40px and then set display: inline-block for #search
#nav {
line-height: 40px;
height: 40px;
}
#search {
display: inline-block;
}
Try below CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
position:relative;
}
#searchField{
margin: auto;
height: 25px;
width: 200px;
position:absolute;
left:0px; right:0px; top:0px; bottom:0px;
}
PS : its not margin; auto;, the correct syntax is margin: auto;
DEMO
add display:block;
#searchField{
display:block;
margin: 2px auto;
height: 25px;
width: 200px;
}
margin auto: top and left
add 'text-align: center;'=> (not only alignment text)
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
text-align: center;
}
#searchField{
height: 25px;
width: 200px;
display:inline-block;
margin:4px auto;
}
2 ways to do it
second way is actually using latest css features so , take care
1.)
.navigationBar { position: relative;}
#searchField { width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.)
.navigationBar { position: relative;}
#searchField { position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I am trying to make a 3-column layout but as you can see from the screenshot below the left-most and right-most columns don't span all the way down:
You can find the code at http://codepen.io/vbelenky/pen/hvbEq and I'm going to paste it here, too:
<div class="wrapper">
<div class="primary">
<div class="primary-left">
Primary Left<br>
blah
</div>
<div class="primary-right">
Primary Right
</div>
</div>
<div class="secondary">
Secondary
</div>
</div>
CSS:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
}
.secondary {
width: 200px;
float: left;
background: cyan;
}
.primary {
width: 400px;
float: right;
}
.primary-left {
width: 300px;
float: left;
background: grey;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
}
HTML :
Use follow code that is similar to your query :
<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</br>Center<br/>Center<br/></div>
<div class="right">Right</div>
</div>
CSS :
.mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% }
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; }
.center{ margin: 0 100px;background:green; }
http://jsfiddle.net/pfqpR/
Like monkhan said, you'll need to set heights for all of the elements, for example (see on CodePen):
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
height: 40px;
}
.secondary {
width: 200px;
float: left;
background: cyan;
height: inherit;
}
.primary {
width: 400px;
float: right;
height: inherit;
}
.primary-left {
width: 300px;
float: left;
background: grey;
height: inherit;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
height: inherit;
}
The downside of this approach is that you'll need to know what the maximum height is ahead of time (in this case, I picked 40px).
One way to approach this is with absolute positions (instead of floats). It doesn't fit to all needs, but it may fit yours.
http://codepen.io/anon/pen/lLngy
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
position: absolute; top: 0; left: 0; bottom: 0;
}
.secondary {
width: 200px;
background: cyan;
position: absolute; top: 0; bottom: 0;
}
.primary-left {
width: 300px;
background: grey;
position: absolute; top: 0; left: 200px; bottom: 0;
}
.primary-right {
width: 100px;
background: yellow;
position: absolute; top: 0; right: 0; bottom: 0;
}
One approach that wouldn't require you to set any pre-determined heights would be to apply a 3-colour background image to the wrapper (image height can be 50px and "repeat-y").
This way you will have the background colours of the inner divs repeating all the way down to the bottom and it won't matter which inner div is the tallest.
For example:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
background-image: url('3colours.png');
background-repeat: repeat-y;
}
Others said it well. I am just showing another possible way(inconvenient). Inconvenient because it makes the width changing more difficult. Just a background image hack. Use a background image of (wrapper width x 1)px for the .wrapper with colors at appropriate positions. Also remove the background color styles from .secondary, .primary-right and .primary-left.
Here is the fiddle: http://jsfiddle.net/eY9VR/
My coworker gave a solution. The main idea is not to use float property and use display table and table-cell. Please refer to the code for reference. I had to move div.secondary to the top, I commented out the float attribute everywhere, I've declared div.wrapper as display: table and div.secondary, div.primary-left, and div.primary-right as display: table-cell.