All:
Right now, I want to implement a horizontal scroll header bar. The layout I used is:
<div id="header_cnt">
<div id="header_mn">
<div class="mn_item">KWD1</div>
<div class="mn_item">KWD2</div>
<div class="mn_item">KWD3</div>
<div class="mn_item">KWD4</div>
<div class="mn_item">KWD5</div>
</div>
</div>
And the style:
#header_cnt {
width:100%;
height:60px;
position: fixed;
}
#header_mn {
background-color: lightyellow;
width:100%;
height:60px;
overflow: hidden;
padding:0px;
}
#header_mn .mn_item {
display:inline-block;
width:200px;
}
The effect I want for first step is:
The header menu fix to top, and all menu items sit in one line and the overflow part get hidden rather than wrap to next line.
[UPDATE] I figure out myself, the way I find out is using FLEXBOX:
Forget structure above,just use some new but similar structure:
<head>
<style>
body, html {
padding:0px;
margin:0px;
}
section {
border: 1px solid gray;
/*padding: 1em;*/
height:300px;
width:100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content:flex-start;
position:fixed;
overflow: auto;
}
div {
min-width: 250px;
height: 50px;
border: 1px solid steelblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
Thanks
You could use flexbox to create this header, check it out here You can also check out flexbox here
CSS
#header_cnt {
width:100%;
height:60px;
position: fixed;
background:#d7d7d7;
}
#header_mn {
background-color: beige;
width:100%;
height:60px;
overflow: hidden;
padding:0px;
display:flex;
flex-direction:row;
justify-content:space-around;
}
#header_mn .mn_item:first-child{
margin-left:10%;
}
#header_mn .mn_item {
display:inline-block;
width:200px;
align-self:center;
justify-content:center;
}
Hope this helps
You need to float:left on those .mn_item
I still don't have Reputation to comment, so here is my tip.
You can set min-width of #header_mn to a multiple of .mn_item.
Related
The title doesn't describe my problem but did'nt find a better one.
So, I have one div containing 3 divs, I wan't two columns with div A in the first one and div B and C in the second, on large screens and one only column on small screens. I could use #media but I think flex can do it without.
This is what I tried:
<div id="container">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
#container
{
border:1px solid #aaa;
height:300px;
width:500px;
max-width:100%;
display:flex;
flex-flow:column;
flex-wrap:wrap;
}
#container > div
{
border:1px solid #aaa;
margin:2px;
flex-grow:1;
min-width:200px;
height:10px;
}
#container > div:first-of-type
{
height:300px;
flex-grow:1;
}
Demo
I fixed the height to force the content to go to 2 columns but then it never goes to onel colum.
Just remove the last css element:
https://jsfiddle.net/j2brc3t3/1/
Live example:
#container
{
border:1px solid #aaa;
height:300px;
width:500px;
max-width:100%;
display:flex;
flex-flow:column;
flex-wrap:wrap;
}
#container > div
{
border:1px solid #aaa;
margin:2px;
flex-grow:1;
min-width:200px;
height:10px;
}
<div id="container">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
#container {
border: 1px solid #aaa;
width: 600px;
max-width: 100%;
display: flex;
text-align: center;
flex-wrap: wrap;
}
#in1 {
background: #a1d;
margin: 5px;
height: 200px;
flex-grow: 1;
min-width: 200px;
}
#in2 {
flex-grow: 1;
display: flex;
flex-flow: column;
min-width: 200px;
}
#in2>div {
background: #e25;
flex-grow: 1;
}
/*
#in2 div:first-child {
margin-bottom: 5px;
}
*/
<div id="container">
<div id="in1">div1</div>
<div id="in2">
<div>div2</div>
<div>div3</div>
</div>
</div>
I found a near solution:
Demo
It answer my question but show a new issue with margins, I need no margin around the container, just 5px between the inner divs, if someone has the perfect solution...
i am attempting to align 3 sub-div elements in one line, first element with left floating, third - with right and 2nd - centered.
Below my draft. What I have missed?
http://jsfiddle.net/yDzL9/
In my real e-shop the problem is in aligning of 2nd div which contains input (button), but in jsfiddle's example the problem with the third div.
Use display: inline-block for all sub elements and set white-space: nowrap; property to parent div.
Example-
HTML:
<div id="container">
<div class="wishlist">
</div>
<div class="cart">
</div>
<div class="compare">
</div>
</div>
Method 1 (Without Floated div):
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
}
#container div{
display: inline-block;
width:100px;
height:26px;
}
Working Example
Method 2 (With Floated div)
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
text-align: center;
}
#container div{
display: inline-block;
width:50px;
height:26px;
}
.wishlist{
background-color:blue;
float: left;
}
.cart{
background-color:black;
}
.compare{
background-color:red;
float: right;
}
Working Example
Using the display: flex css rule it will work as you want it to!
HTML:
<div id="container">
<div class="wishlist"></div>
<div class="cart"></div>
<div class="compare"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
#container {
height:26px;
width:300px;
padding: 10px;
display: flex;
background-color:green;
}
#container > div {
height: 90%;
width: 90px;
}
.wishlist {
float: left;
background-color:blue;
}
.cart {
margin: 0 auto;
background-color:yellow;
}
.compare {
float: right;
background-color:red;
}
As shown in this jsfiddle, and here is another one.
I want to achieve this particular display by CSS:
I need to put there various texts and the lines to fill the white space that is left on right and left.
So far I got to this http://jsfiddle.net/g5jtm/, however there are several issues that I encounter:
the width of the text is variable and if I get out the width:40%; it will reset the width of the other 2 lines
The display:table does not allow me to align the lines through the middle of the text
HTML:
<div class="container">
<div class="lines l1"></div>
<div class="copy">Consumer review</div>
<div class="lines l2"></div>
</div>
CSS:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
.l1,.l2 {border-bottom:1px solid red; height:50px; }
Here's one way with pseudo-elements
Codepen Demo
HTML
<div class="wrapper">
<h1 class="line">Consumer Review</h1>
</div>
CSS
.wrapper {
width:50%;
margin:0 auto;
}
.line {
display: table;
white-space: nowrap;
}
.line:before,
.line:after {
background: linear-gradient(to bottom, #9FD35F, #4F8C31) no-repeat center / 98% 3px;
content: '';
display: table-cell;
width: 50%;
}
How about a horizontal line tag
html:
<div class="container">
<div class="lines l1"><hr></div>
<div class="copy">Consumer review</div>
<div class="lines l2"><hr></div>
</div>
css:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
hr {color:red}
My HTML structure is basically this -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
Ignore any elements except <div id="header">
I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.
How do I align it both center AND bottom at the same time?
I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.
After making some research I tried the following and it worked perfectly on all screen sizes.
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
I shared this for anyone still facing this issue.
try in this way:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
try this
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
use this:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here the jsfiddle
UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here is a demo: http://jsfiddle.net/d6ct6/ .
I was trying to get this to work in my project as well. I've edited this jsfiddle:
http://jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
But I've found this only works when the width of .container is fixed.
If the width of .container is not fixed you would need javascript to find it's width and then change that width in the calc.
When the widths are responsive, use this:
HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
In case you care more about having the inside div aligned in the center and can manually set the vertical alignment.
DEMO Height I used was first div height - second div height.
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
I would take advantage of CSS table display properties and do the following:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
Set the #header block to display: table-cell and set vertical-align: bottom to align the child's bottom edge to the bottom edge of the parent.
The child .container element had display: inline-block and this will allow it to respond the text-align: center property of the parent.
This will work regardless of the width of the child .container.
Demo fiddle: http://jsfiddle.net/audetwebdesign/p9CxE/
This same problem was bedevilling me for an hour or so, until I realised I could add an intermediary div; this separated the vertical alignment issue from the centering.
.dparent {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
}
.dchild {
border: 1px solid blue;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100px;
bottom: 0px;
position: relative;
}
.dmid {
border: 1px solid green;
width: 100%;
position: absolute;
bottom: 0;
<div class="dparent">
<div class="dmid">
<div class="dchild"></div>
</div>
</div>
Do the vertical alignment first, with an absolute position and the 0 bottom. Then do the centering with margin-left and margin-right set to auto.
You might try this solution for any concerned width:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
Good luck!
I want to make a one Column Layout with 3 section
Section 1: Header
Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel
Section 3: Footer that always resides at the bottom of the browser window.
The Problem:
I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.
Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.
Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.
thanks!
http://jsbin.com/ixipug/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
#containerHeaderContent {
min-height:100%;
height: auto;
height: 100%;
margin: 0 auto -1.5em;
}
.push {
height: 1em;
}
.header {
background-color: aqua;
padding-top:20px;
}
.subheader-left {
float:left;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
float: right;
font-family: sans-serif;
font-size: 12px;
padding-right: 20px;}
.middleSection {
padding-top: 10px;
clear:both;
width:100%;
height auto;
background-color: #e8e7e7;
}
.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;
}
.bottom-left {
float: left;
font: sans-serif;
left: 20px;
}
.bottom-right {
float: right;
right: 15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div id="containerHeaderContent">
<div class="header">
<div class="subheader-left">XYZ</div>
<div class="subheader-right">LOREM</div>
</div>
<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div>
<div class="push"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — info#info.com
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
2018 update
use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:
body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
article {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="page">
<header>header content</header>
<article>main content</article>
<footer>footer content</footer>
</div>
No need to use tables! Some simple css will do nicely.
DEMO: http://jsbin.com/azivip/2/edit
Html Markup:
<body>
<div id="content">
<div id="header">
This is the header
</div>
<div id="inner">
This is the body
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
CSS:
body{
height:100%;
padding:0px;
margin:0px;
}
#content{
position:relative;
bottom:0px;
width:100%;
height:100%;
}
#header{
position:relative;
bottom:0px;
width:100%;
height:100px; /* Edit for height of header*/
background:#f00;
}
#inner{
width:100%;
text-align:center;
position: absolute;
top: 50%;
display: table-cell;
vertical-align: middle;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px; /* Edit for height of footer */
background:#0f0;
}
In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.
var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
<table> is what you need to use in this case. The HTML will look like this, basically:
<table class = "wrapper">
<tr><td class = "header">I'm the header.</td></tr>
<tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
<tr><td class = "footer">I'm the footer.</td></tr>
</table>
Example CSS:
html, body, .wrapper {
height: 100%;
}
.header {
height: 100px; /*This value can be anything*/
}
.content {
text-align: center;
}
.footer {
height: 100px;
}
Demo: jsFiddle.
Note how the content is centered both vertically and horizontally.
Hope that helped!