I want to put two divs next to each other but no matter what I do, the second div always ends up somewhere under the first. I have tried:
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float:right;
margin-left:50%;
}
and
div.one {
width:50%;
display:inline-block;
}
div.two {
width:50%;
display:inline-block;
}
From your first example try removing the margin.
div.one {
width:50%;
float:left;
}
div.two {
width:50%
float: left;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Here is a link to a great tutorial that gives you several examples of positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning
Both should be "float:left;"
The elements have to fit - when there is a border , margin or padding, the "width:50%;" might be too high.
.one {
width: 50%;
float: left;
background: green;
height: 100px;
}
.two {
width: 50%;
float: right;
height: 100px;
background: red;
}
http://jsfiddle.net/qf9GD/
Related
Hi i'm doing the a basic layout and i have a problem with my css.
I have a footer tag set, but it doesnt appear at the bottom it appears a the midway point in the page.
Here is my CSS code
My "footer" doesn't appear at the foot if the page ?
I think it might be the height and width i have set but i'm not sure what to set it as prperly.
Thanks in advance
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Replace the footer with:
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
The tutorial used: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This is my full CSS:
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
And this is how i referenced it from the html:
<footer id ="footer">Some footer text</footer>
I suspect you did not reference it correctly, with the proper id from your div?
I think I see your problem. In the footer css code you have the following:
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Pretty sure the margin-bottom being a negative number is the issue. Change that to 5 or 10 and see if it appears.
i got it thanks for all your help.
i got this from summer codes answer above
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
and i had to change the main section to
#main
{
position:relative;
height:100%;
background:#666;
}
I'm trying to vertically align + symbol in the middle of the boxes div however I can't get it working. What am I doing wrong? I would also like to avoid using tables. Thanks ( I also attached codepen link)
<div class="boxes">
<div class="boxes_box">
</div>
<div class="boxes_plus">+</div>
<div class="boxes_box">
</div>
</div>
CSS
.boxes {
height: 250px;
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
}
.boxes_plus {
display:inline-block;
height:250px;
line-height:250px;
vertical-align:middle;
}
http://codepen.io/anon/pen/aoiGm
use this:
.boxes {
height: 250px;
display:table;/*Add display table*/
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
display:table-cell;/*display table cell here is not necessary*/
}
.boxes_plus {
display:inline-block;
height:250px;
line-height:250px;
vertical-align:middle;
display:table-cell;/*Add display table cell*/
}
fiddle
Alternative you can simple remove line-height:
.boxes_plus {
display:inline-block;
height:250px;
/*line-height:250px;*/
vertical-align:middle;
}
fiddle
<style>
.boxes {
height: 250px;
display:table;
}
.boxes_box {
width: 250px;
height: 250px;
display:table-cell;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
</style>
For the smallest change from what you have, change .box_plus's vertical-align to top.
http://codepen.io/jwhitfieldseed/pen/FeJco
Explanation: line-height puts the "+" text in the vertical center of .boxes_plus.
The text is already centred vertically in its container, so you now need to make the top of .boxes_plus align with the top of .boxes_box.
Please update your css as follow
.boxes {
height: 250px;
display: table
}
.boxes_box {
width: 250px;
height: 250px;
display:table-cell;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
http://codepen.io/anon/pen/crBea
Try this:
DEMO
.boxes {
height: 250px;
display:table;
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
I have a header created with two div containers, one #header-container and one #header:
#header_container {
background:#eeeeee;
border:0px hidden;
height:100px;
position:fixed;
width:1000px;
top:0;
margin: auto;
display: block;
}
#header {
line-height:60px;
margin:0 auto;
display:block;
width:940px;
text-align:center;
}
I am of course unable to have both "fixed" and "center", so how can I center the header while keeping the "fixed" property?
Thanks!
This should do the trick to horizontally center a div with fixed position, of which the width is not 100%:
position:fixed;
background-color:grey; /* optional */
height:100px; /* optional but useful for most of you, choose value you want*/
width:1280px; /* optional but useful for most of you, choose value you want*/
top:0px; /* optional but useful for most of you, choose value you want*/
margin-left:auto;
margin-right:auto;
left:0;
right:0;
More info here: http://www.w3schools.com/cssref/pr_pos_left.asp
If you add "left: 50%;margin-left: -500px;" to #header-container, it will center. Don't forget to place the margin-left behind the margin: auto;
So your code will be:
#header_container{
background: #eeeeee;
border: 0px hidden;
height: 100px;
position: fixed;
width: 1000px;
top:0;
left: 50%;
margin-left: -500px;
display:block;
}
#header{
line-height: 60px;
margin: 0 auto;
display: block;
width: 940px;
text-align:center;
}
Here's a fiddle:
http://jsfiddle.net/AJLZT/8/
Just use
#header { margin: 0 30px;}
This might help. You just need to add the margin-left tag in your code
#header_container{
width:1000px;
height:200px;
margin:10px;
background:orange;
position:fixed;
margin-left:350px;
}
#header {
line-height:60px;
margin:0 auto;
display:block;
width:940px;
text-align:center;
}
Here is the 100% cure for this problem in one go.
Here you go:
First, add the bootstrap in the "head" in "html"
Then in the header, add the class "container-fluid"
Then in the style section, type as:
header {
position:fixed;
top:0;
left:0;
right:0;
}
//boom!!! problem solved.
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
This is a really simple question about CSS. I want to get the style depicted in the picture, I tried this code:
#parent {
overflow: hidden;
text-align:center;
}
.navbar {
position:absolute;
top:0px;
right:3px;
}
.logo {
float:left;
}
.table {
float:left;
}
but it doesn't work for me, I get this:
Try:
#parent {
overflow: hidden;
text-align:center;
margin:auto;
width:80%;
}
.navbar {
position:absolute;
top:0px;
right:3px;
}
.logo {
float:left;
}
.table {
float:left;
}
In order to accomplish what you want, you'll need to center your parent divider using margin:auto and placing a fluid width using width:80%.
I'd give your parent element an explicit width, then position from there:
#parent {
width: 960px;
margin: 0 auto;
position: relative;
}
.navbar {
position: absolute;
top: 0;
right: 3px;
}
.logo {
margin-bottom: 20px;
display: inline-block;
}
.table {
width: 100%;
}
I don't know what other contents you have on the page, but your .logo element should appear where you want using default HTML flow. If the table is 100%, it will clear. You should be able to pull this off without floats.