I have a problem making a 3 column layout. I have tried all examples now online - used Google. None of this seems to solve my problem.
What I try to do is easy for people with knowledge.
Make a 3 column fluid layout that cover the whole screen.
Left column should be 230px width, fixed, height 100%.
Center column and right column should be equal width.
For both center - and right column they have to "float" into each other
Problem occur when you zoom out. Center column run away to left and make a huge white gap between center column and right column.
That is my problem.
center and right column need to be close to each other - no gap.
How can I solve this?
You can see my attempt here: Fiddle
Just zoom out, and you see the problem straight away. Need help to fix this. How?
Another problem occur if I use a div wrapper inside the center column with width set to 100%. Same problem as described above will happened. The text in both left and right column need to be float as well.
I can't use overflow:hidden because I need to - later - use a absolute div on right side of the center column to set a image arrow pointing to right column.
You mean something more like this: http://jsfiddle.net/gbRzM/?
(uses left, right and width properties to position everything)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.right {
right:0;
width:30%;
position:fixed;
background: RED;
}
.center {
left:230px;
right:30%;
position:fixed;
border:1px solid;
background:YELLOW;
}
Or more accurately this: http://jsfiddle.net/HKJvP/?
(puts center and right in a new div, so that pixels and % can be mixed, allows equal width that you specified)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.notleft{
left:230px;
height:100%;
right:0;
position:fixed;
}
.right {
right:0;
width:50%;
position:absolute;
background: RED;
}
.center {
left:0;
width:50%;
position:absolute;
border:1px solid;
background:YELLOW;
}
give a fixed width to the parent element of three columns and add class clearfix
``
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Related
I'm trying to render a 3 column design with the following :
middle fixed width at 660px
left and right half of the remaining but with min-width : 120px
middle div should be centered on the screen
Everything I'm finding is about fixing left and right column and letting fluid the middle one, but I want the exact opposite.
I've partially achieved my goal using
display: inline-block;
vertical-align: top;
Here's the fiddle.
What's missing is the right resizing of the right and left div. When the window get resized, 660/sizeofwindow is changing, so the value in percentage of the left and of the right div are no longer correct.
Use calc to achieve this.
It is a native CSS way to do simple math right in CSS as a replacement for any length value.
Please note that calc does not work with all browsers.
Write:
#left, #right {
min-width:120px;
width:calc(50% - 330px); // half of 660px
}
As you are using display:inline-block, make sure you don't leave any space between your div's because inline-block leaves white-space between elements.
See updated fiddle here.
http://jsfiddle.net/hdt75/
.fenetre {
text-align: center;
width:1200px;
background-color: grey;
margin: 0 auto;
}
If you want table-like behavior, you should use display: table-cell in your CSS:
.fenetre {
display: table-row;
}
.section {
display: table-cell;
}
#right {
width: 50%;
}
#middle {
min-width: 660px;
max-width: 660px; // just 'width: 660px' won't be enough here
}
#left {
width: 50%;
}
http://jsfiddle.net/mblase75/zL9cn/
I am trying to add a carousel-like animation to my photographic calculator
I am extremely new to javascript/html/css so I have been having some troubles doing this. :)
My idea was to fill in each table row with divs generated from an array, with all but the three divs beeing hidden by overflow:hidden of the outer container.
Here if my test jsfiddle:
table {
width:80%;
background:#ffff00;
border: 1px solid black;
position:relative;
overflow:hidden;
}
.test {
width:33.3333%;
height:100%;
background:cyan;
text-align:center;
vertical-align:center;
float: left;
position: relative;
left:0%;
top: 0px;
}
The problem is if I try to add more than 3 divs (set n=4), they wrap to the next line while I want them to stay on the same line. If I use absolute positioning then I can't use the overflow hiding (or can I?).
I am hoping there is an easy solution to this. Help?
The float: left causes elements to wrap when filling all available horizontal space. What you need to do is arrange your divs inline and make elements in your carousel not wrap:
http://jsfiddle.net/Wdnw9/19/
CSS
#box { white-space: nowrap; }
.test{
...
display: inline-block;
}
I am trying to put a gray bar on the bottom of the screen of my webpage, regardless of the resolution. However, when I try, it seems to just go up or down when I go in a different resolution. Is there any way to fix this?
Also, the bar is made out of CSS using the div id tag.
/* HTML*/
<div id="info">Scroll for info</div>
/* CSS */
<style>
#info {
height: 40px;
position: relative;
margin-top: 25%;
background-color: #393838;
opacity:
}
</style>
EDIT: I want it to be on the bottom of the screen, but then when I scroll down it goes up towards the top of my screen.
If you want it on the bottom and always at the bottom, you have to use position: fixed.
You could try this:
#info {
height: 40px;
position: fixed;
bottom:0%;
width:100%;
background-color: #393838;
opacity: 1;
}
http://jsfiddle.net/rX4nd/1/
How about adding entering as well?
.someDiv {
position:fixed;
width:50%;
height:300px;
margin-left:-25%;
background:#063;
bottom:0px;
left:50%;
}
Here is some Documentation that should help you with what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
Tl;dr, set "position: fixed" to place it at the bottom of the rendered part of the parent.
Sorry for this very basic question.
I have these two boxes containing width evenly-
.box1
{
width:50%;
height:200px;
}
.box2
{
width:50%;
height:200px;
}
Here is container div of these boxes-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
I want to know when container div has width of 100% and its containment divs are equally divided to 50% of width.
Then after aligning them inline why isn't it coming in-line?
However reducing width less than to 50% makes them align.
Although if i align them with float attribute its shown inline-
.container
{
border:1px solid green;
display:inline-block;
width:100%;
}
.box1
{
float:right;
width:50%;
height:200px;
background:red;
}
.box2
{
float:right;
background:red;
width:50%;
height:200px;
}
I want to know the reason why it is not showing them inline whether width is equally divided?
They are inline-block, but usually when using 50% you don't count for pixel rounding and margins/padding. So, in reality, 50% would be 50% + 10px, which will cause the next div to not fit in the same line, breaking the line and dropping it below the first div instead of alongside it. If you inspect the element using Chrome's inspector or Firefox's Firebug, you will notice it doesn't take up the whole width, only just above half of it.
Your border counts as part of the element size, it's an addition and not an inclusion in the width 100%. That will cause an inline element to move onto the next line down.
The box model adds all of it's parts together to get the final size, including padding and margin:
http://www.w3.org/TR/CSS2/box.html
A normal gotcha is that when you specify border 1px you're actually adding two pixels to the final computed size, one to the left and one to the right.
Firstly I would set padding: 0; and margin: 0; incase of any browser allocated padding (user agent stylesheet - this can be seen using inspect element in chrome, or firebug for Mozilla etc), and if you are going to float them then float them left and clear the floats afterward. So you have something like this:
.container{
border: 1px solid green;
width:100%;
}
.box1{
margin: 0;
padding: 0;
float:left;
width:50%;
height:200px;
background:red;
}
.box2{
margin: 0;
padding: 0;
float:left;
background:red;
width:50%;
height:200px;
}
Should do the trick.
i created a main div and split-ted into two css code
#main { background-color:#FFFFFF; width:1000px;}
#left { width:750px; float:left }
#right { width:250px; float:right }
but background color does not changes , when i changed it to
#main { width:1000px;}
#left { background-color:#FFFFFF; width:750px; float:left }
#right { background-color:#000000; width:250px; float:right }
it works but when height changes it looks boring i want to change the background color of whole main div.
what about if your main div gets a
#main {
min-height:100px;
max-height:100px;
}
it needs a height to display background-color
if its not working show the html part please
Without the html this is just a guess, but I think your problem is that the div#main has a height of 0. This happens because the floating divs inside are no longer part of the document flow. Try setting a height on the main div, this should fix it.
Add following rule
#main:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }
It will clear floats and make the container as high as the highest column inside.