I am positioning main-bar and side-bar with 70-30 ratio as under: JSFIDDLE
.main-bar, .side-bar{
position: relative;
margin:0; padding: 0;
outline: 0;
display: inline-block;
border:none;
background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}
/* This Works
.side-bar{width: 29%}
*/
<div class="main-bar">
I am the King!
</div>
<div class="side-bar">
I am not less!
</div>
Interestingly, it works with 70-29 ratio. Did I miss something?
You have to remove white space between divs as it also take place and doesn't let inline-blocks align properly.
.main-bar, .side-bar {
position: relative;
margin: 0;
padding: 0;
outline: 0;
display: inline-block;
border: none;
background: #CCC;
}
.main-bar {
width: 70%;
}
.side-bar {
width: 30%;
}
<div class="main-bar">
I am the King!
</div><!--
--><div class="side-bar">
I am not less!
</div>
Reference: Fighting the Space Between Inline Block Elements
This is because the white space in-between your inline-block elements you need make them 0 using the font-size property just as follows
body{
font-size: 0;
}
.main-bar, .side-bar{
position: relative;
margin:0; padding: 0;
outline: 0;
display: inline-block;
font-size: 14px;
border:none;
background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}
Working Fiddle
I recommend to go with float for these scenarios.
.main-bar, .side-bar{
margin:0; padding: 0;
outline: 0;
border:none;
background:#CCC
float: left;
}
.main-bar{width: 70%}
.side-bar{width: 30%}
.main-bar, .side-bar{
position: relative;
margin:0; padding: 0;
outline: 0;
display: inline-block;
border:0;
background:#CCC;
float:left;
}
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to
their left and right.
Block elements:
respect all of those
force a line break after the block element.
Related
Im trying to make a line after each of my h2 tags. I can´t figure out how I should tell the width, cause the lenght of the h2 headlines is differ from h2 to h2.
I use the :after method to create lines
h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
Check code here: http://jsfiddle.net/s9gHf/
As you can see the line get too wide, and make the website too wide.
You could achieve this with an extra <span>:
h2 {
font-size: 1rem;
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
Another solution without the extra <span> but requires an overflow: hidden on the <h2>:
h2 {
font-size: 1rem;
overflow: hidden;
}
h2:after {
content: "";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
External examples: First, Second
There's no need for extra wrappers or span elements anymore. Flexbox and Grid can handle this easily.
h2 {
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 1px;
background-color: #000;
}
<h2>Heading</h2>
using flexbox:
h2 {
display: flex;
align-items: center;
}
h2 span {
content: "";
flex: 1 1 auto;
border-top: 1px solid #000;
}
<h2>Title <span></span></h2>
Here is another, in my opinion even simpler solution using a flex wrapper:
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}
<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>
External link
I notice that there are some flexbox implementations but they don't explain why and how to use it.
First, we just need one element, for this example h2.
We will change the element's display behavior to display: flex
Then, we center vertically its child elements using align-items: center.
h2 {
...
display: flex;
align-items: center;
}
Then, let's draw the line using the pseudo-element after.
We add '' to the content property to draw the element (we must).
Now lets make it flexible using flex: auto. This means that our element is sized according to its width and height properties. It grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.
Then we add an small gap between the text and the line using margin-left: 1rem.
Finally, we draw a black line using border-top: 1px solid #000.
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
Here is functional snippet.
h2 {
font-size: 1em; /* not needed */
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
<h2>Normal title</h2>
<h2>Very long title to test the behavior of the element when the content is wider</h2>
This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle
h2 {
background-color: #ffffff;
margin-top: -22px;
width: 25%;
}
hr {
border: 1px solid #e9a216;
}
<br>
<hr>
<h2>ABOUT US</h2>
Here is how I do this:
http://jsfiddle.net/Zz7Wq/2/
I use a background instead of after and use my H1 or H2 to cover the background. Not quite your method above but does work well for me.
CSS
.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }
HTML
<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>
I am not experienced at all so feel free to correct things. However, I tried all these answers, but always had a problem in some screen.
So I tried the following that worked for me and looks as I want it in almost all screens with the exception of mobile.
<div class="wrapper">
<div id="Section-Title">
<div id="h2"> YOUR TITLE
<div id="line"><hr></div>
</div>
</div>
</div>
CSS:
.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}
#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}
#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}
#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}
#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }
I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/
<html>
<head>
<link rel="stylesheet" href="../static/styles/base.css" type="text/css" />
</head>
<body>
<div id= "top-nav">
<h1>Sitename</h1>
<ul>
<li>Feed</li>
<li>Profile</li>
<li>Settings</li>
</ul>
</div>
</body>
</html>
#
html,
body {
height: 100%;
width: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav{
background-color: Gray;
width: 100%;
height: 135px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav h1{
float: left;
margin: inherit;
padding-right: 700px;
}
#top-nav ul{
float: left;
bottom: 0;
}
#top-nav li{
text-align: right;
display: inline;
padding-right: 5px;
}
What I would like my layout to be, is to have the h1 vertically aligned in the center of the top-nav div and I would like the ul to be on the right of the page at the bottom of the top-nav. Why am I getting unexpected results?
The padding-right: 700px rule in #top-nav h1 is pushing the ul element off-position.
Something like this should work:
html,
body {
height: 100%;
width: 100%;
padding: 0; /* You can just have one 0 instead of "0 0 0 0". */
margin: 0;
}
#top-nav {
background-color: Gray;
width: 100%;
height: 135px;
}
#top-nav h1 {
float: left;
line-height: 135px; /* Set to the height of #top-nav */
margin: 0;
}
#top-nav ul {
float: right;
}
#top-nav li {
text-align: right;
display: inline;
padding-right: 5px;
}
For your nav being on the bottom of the top-nav element, you could use the absolute property, so it always be fixed at the bottom.
Don't use a float left for the H1 as the previous answer say.
For your h1 being align vertically, you can try different padding to get what you want (or you can make a more complicated scaffolding by using the display:table ...)
But the more simple is that :
#top-nav h1{
padding-top:30px;
display:inline-block;
width:auto;
vertical-align:middle;
}
#top-nav ul{
position:absolute;
top:100px;
right:5px;
}
does it answer ?
edit
could it be due to the space you've got in
<div id= "top-nav">
after "id=" ?
also, instead of using padding-right: 700px; for h1 element, just float the ul element to the right.
There is several ways you can achieve what you want. F.e., for vertical aligning the h1 in the middle of #top-nav:
#top-nav h1 {
...
line-height: 135px;
margin: 0;
}
and for aligning the ul at the bottom of #top-nav:
#top-nav {
...
position: relative;
}
#top-nav ul {
...
position: absolute;
bottom: 0;
right: 0;
}
You are having problems because you are using layout elements incorrectly. The <ul> element is for unordered lists, not for menus containing links. Also, using float is highly discouraged because it was only intended to be used to have text wrap around an image and not for layout. Floats have to be cleared and don't work well cross-browser.
The trick here is to use absolute positioning and make sure that the value is relative to the container, so you have to set the #top-nav div to have position: relative otherwise its children will be positioned relative to the first positioned parent element, which is most likely the body element in this case.
This works fine for me:
http://jsfiddle.net/gc3EY/1/
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="top-nav">
<h1>Sitename</h1>
<span>
Feed
Profile
Settings
</span>
</div>
</body>
</html>
CSS:
body { margin: 0; padding: 0; overflow-x: hidden;}
div#top-nav span {
position: absolute;
bottom: 0px;
padding: 0;
margin: 0;
text-align: right;
width: 97%;
}
div#top-nav span a {
padding: 0 2px;
}
div#top-nav {
background-color: gray;
width: 100%;
height: 135px;
margin: 0px;
padding: 5px;
position: relative;
}
div#top-nav h1 {
position: relative;
top: 0px;
margin: 0;
padding: 0;
}
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.
I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}