I've been searching all morning and I can't find a solution to my specific problem. I have a layout where I have a left column that is set to about 50px and a right column that is set to take up the remaining 100% of the page. This part works.
Now, in the right column, I have another 2 column layout. But since the container's width is 100%, my inner right column keeps expanding past it's parent. I need it to simply fill the remaining space, similar to the parent layout. I've created a jsFiddle with my example code.
http://jsfiddle.net/87nb2/1/
As you can see, the green 'gallery' section is going past the right side of it's parent. This is the problem I'm trying to solve.
The way you have it at the moment, I think all you need to do is:
On #gallery, change width: 100% to right: 0.
This works because an element can have both left and right properties at the same time.
Live Demo
You might also want to adjust the left value to 50px, to avoid cutting off some of the left element:
Live Demo
http://jsfiddle.net/87nb2/14/
#filmstrip_nav {
float:left;
height: 94%;
width: 50px;
background-color:red;
}
#gallery {
overflow: auto;
height: 94%;
background-color: green;
width: 100%
float:left;
}
Related
So I have a div at the bottom of my page which is good, the problem is that it is overlapping my sidebar on the left, so how do I scoot it over? I trued to do float:right, but it does not seem to do anything, I'm assuming because it's in a fixed position. I also tried to change the width, but that just cuts it from the right side. So how can I get it where I need it, which is just taking up the remaining part of the page where the side bar is not?
I'm shooting for this look:
.footer {position:fixed; bottom:0; float:right; background-color:lightgray; font-size:90%}
You could use FLEXBOX for that
I made a little fiddle using flexbox since you didn't provide your layout
JSFIDDLE
The fixed property for the footer is not required.
Also, specifying the footer element as block will
ensure proper behaviour when applying style to it.
.footer { position: relative; display: block; background-color: #f2f2f2; float: right; font-size: 90%; width: auto; overflow: hidden; }
The width was set to auto because I don't the exact size of your sidebar. To set it to a number, you need to perform some calculation. For example:
If the sidebar width is 30%, and also has a border, then the total width is: 30.2%;
That is, 1px left plus 1px right borders.
Although, the size depends on the border width.
Then the footer width should be set to 68.8% or 68.75% if it has no border.
I'm trying to eliminate the extra space in the #middle-panel underneath the .box-label text, but I need to maintain the functionality of the #middle-panel expanding when I get to smaller screen sizes and the text becomes stacked. But if I set a specific height on the #middle-panel to eliminate the extra space, it no longer expands to accommodate the stacked type.
This fiddle shows my current implementation:
Current Fiddle
If, in the fiddle, you add height: 65px; to the #middle-panel-inner-div, you will see the desired amount of space below the text. Unfortunately, if you then change the width: of the .red-box-and-label class from 25% to 20% (to represent what will happen at smaller screen sizes), you will see the text becomes stacked, but the #middle-panel doesn't expand to accommodate it. Delete the just-added height: 65px; and you will see that the #middle-panel has now expanded to accommodate the text, but once again with too much space on the bottom.
I've tried some solutions, such as: Div overlapping & wrong height
but none of them seem to work.
Any suggestions would be greatly appreciated!
This thing is happens because height is auto and parent div expand height depend on child div. So it takes it's child div height. Even though you give negative top value.
The solution of this issue is, remove negative top value and give margin-top to .red-box-and-label
Remove top: -30px; from #middle-panel-inner-div. And:
.red-box-and-label {
margin: -30px 0 0;
padding: 0;
width: 25%;
}
Updated Working Fiddle
Normally you'd need an inner wrapper for the #middle-panel-inner-div with a negative bottom-margin to compensate for the 30px you moved the boxes up with. But if you place it, you'd have to move all the flex properties from #middle-panel-inner-div to the inner wrapper. So it's easier to just make an outer wrapper for it, move the top:-30px; position:relative to it and add the margin-bottom: -30px to #middle-panel-inner-div.
Here's your updated fiddle.
Notice the change in markup and the relevant CSS code:
.aWrapper {
top: -30px;
position: relative;
}
#middle-panel-inner-div {
/* top: -30px */
/* position: relative */
margin: 0 auto -30px;
}
I have a web page with a form centered on the page. Easy enough: the form is "margin: 0px auto".
Now the client says they want a picture behind it and the form skewed to the left, with about 1/3 of the available space on the left and 2/3 on the right.
I can't hard-code the number of pixels because I don't know the width of the screen, and I only sort-of know the width of the form. The form presently has "width: 100%; max-width: 920px;" I may have to change that so at least some of the form will show on either side.
But okay, I can center with margin "auto", but how do I "off-center"? Is there a way to say to put 1/3 of the available space on the left and 2/3 on the right? I don't know a way to say that.
You can simply use a margin and a transform:
div {
width: 50px;
height: 50px;
background: purple;
margin-left: 33%;
transform: translateX(-50%);
}
<div></div>
I want to position a div beside another one. They both should have a width of 100%, whereby the left div has a width specified in px. This width can vary. I want the right div to expand to the right side, so that both divs together take 100%.
I've made a fiddle to describe my problem: http://jsfiddle.net/2gWLn/
As you can see the words "right" are not in one line. I've tried to solve that by applying a padding-left or float: left to the right div. But this does not work because the width of the left div can vary, so I can't specify that as padding-left.
How can I solve that?
The following may work:
.right {
width: auto;
height: 200px;
background-color: yellow;
overflow: auto;
}
Set overflow: auto to .right and this will establish a new block formatting context for .right and hence, prevent the content of .right from interacting with the adjacent floated element. Also, set the width value to auto instead of 100%. (A width value of 100% works in Firefox, but not in Chrome or IE.)
See demo: http://jsfiddle.net/audetwebdesign/9X6VY/
This is my site.
I'm attempting to get the black div to break out of the parent div and span the width of the browser.
I'm trying to do this with negative margins.
Like so
.aboutTop {
background-color: black;
width: 100%;
height: 600px;
position: relative;
margin-left: -100px;
margin-right: -100px;
}
Note: I've tried it with margin-left: -100%; just using the above to see what's going wrong.
However, the margin-right isn't working.
It just shifts the box to the left by 100px.
Why is this?
The margin-right property is funny to play with, when you are left aligned, it creates space to right instead of moving to right. Having answered on of your previous related question, I must say, just increase the width to fit the screen, instead of adding negative right margin. You got the box to left corner, increase width now, and make it fit the page.
HERE's what you must do.
Pick up the entire division and move it out of the parent that is containing its width
USE:
#yourdiv{
position:absolute;
top:200px;
left:0;
background:black;
width:100%;
height:200px;
}
Do it the simplest way... Instead of messing around. Get it out of that damn parent div.
Remove margin-right and adjust it with margin-left.
You set your width to 100% (so thats 100% of the parent)
You say you want to break out of the parent width at both sides!
This goes against each other
The left margin is doing its job like supposed and the right margin isn't because the 100% limit is reached!
Delete the width:100%; and you're good to go!
[EDIT]
Above doesn't solves the 100% width of the browser issue
Mayby thats possible with some javascript?
var screenwidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
and then something like
document.getElementById('aboutTop').style.width = screenwidth;
This requirers you to change the class='aboutTop' to id='aboutTop'