I'm try to create a side by side div that have 100% height, i manage to get the first div working but the second one is cause problem, been trying to do this for the last 3 hours.
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
}
/*leftColumn */
.leftColumn {
float:left;
width:250px;
height:100%;
background:#fafafa;
border-left:solid 1px #dedede;
position:fixed;
top:0px;
}
/* Content */
.mainContent {
float: left;
width: 650px;
height:100%;
background:#fff;
margin-left:252px;
padding-bottom: 50px;
}
example of how it's supposed to look like
http://i49.tinypic.com/ycef7.jpg
how it looks like at the moment.(tried everything dunno how to fix it)
http://i49.tinypic.com/2ryk5eo.png
Rather than giving explicit height to both the inner divs floated left, you should use overflow:hidden; on parent div, e-g:
#mainWrapper{
width: 900px;
margin:0px auto;
background:#fff;
overflow:hidden;
}
Add
html, body {
height: 100%;
}
(http://jsfiddle.net/zYWjJ/2/)
Related
I have a confirm box and I want to show it in the middle of my screen.
margin 0 auto does not solve my problem.
How can I center it?
https://jsfiddle.net/y5u5obL0/
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
It's because the element is fixed.
You need to add left: 0;/right: 0 in order for the element to be centered (in combination with margin: 0 auto). In doing so, the element technically stretches to fill the screen, but since it has a width specified, it will be contained and centered within the available space.
Updated Example
#confirmBox {
position:fixed;
left: 0;
right: 0;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
Use the following code to vertically and horizontally center anything, change relative to absolute if you want to remove it from the page flow. Check out the demo to see it in action
(Demo)
HTML
<div class="wrap">
<div class="mycontent">
Hello World!
</div>
</div>
CSS
.wrap {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
max-width: 100%;
max-height: 100%;
}
Margin: 0 auto; will not work until you will not provide left:0; and right:0
check fiddle for working example :https://jsfiddle.net/nileshmahaja/y5u5obL0/1/
CSS
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
left:0; /* Added Property */
right:0; /* Added Property */
}
On our website, we have a container, with a DIV box inside which leaves a space along the right hand side so we can add some more boxes with images / text.
I got as close as the boxes to the right hand side but underneath the "main" div.
http://jsfiddle.net/Ug5pz/2/
Thanks!
CSS:
#container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto 0;
background: #FFF;
border-style:solid;
border-width:2px;
}
#main {
position:relative;
width: 450px;
height: 300px;
border-style:solid;
border-width:2px;
}
#sidebox {
position:relative;
width:120px;
height:50px;
float:right;
border-style:solid;
border-width:2px;
}
HTML:
<div id="container">
<div id="main">Welcome to our website!</div>
<div id="sidebox">Sidebox</div>
</div>
Try adding float:Left to the #main CSS
Alternatively you could modify the #sidebox CSS as follows:
position:absolute;
right:0px;
top:0px;
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}
I've made a footer wrap outside the content wrap (which everything else is in). I would like to make the footer wrap extend to fill the width of the page and I would like it to be fixed on the bottom. Here's the code:
footerWrap {
background-color:#000;
width: auto;
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
border:#000 inset medium;
}
The website is item9andthemadhatters.com please let me know if you need any other code or info. Thanks!!
update:
html {
padding:0;
height:100%;
width: 100%;
}
body{
margin: -1px 0 0 0;
background-color:#FFF;
font-family: calibri;
background-image:url(images/item9HeaderSideFiller.gif);
background-repeat: repeat-x;
padding:0;
height:100%;
width: 100%;
}
wrap {
width: 965px;
margin:auto auto;
min-height:462px;
max-height:4000
px;
footerWrap {
background-color:#000;
position:absolute;
bottom:0;
width:100%
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
}
}
To fill the page
width:100%
To stay at the bottom of the page a solution could be
position:absolute;
bottom:0;
notice that in both body and html you have to set
padding:0
height:100%;
Try width:100% in footerWrap. Also, what do you mean by fixed on the bottom? Do you mean the footer should always be at the bottom of the screen, even when scrolling? Or do you mean it should always be at the bottom of the page?