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'
Related
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 figured out how to get it to not stretch over the left side by using margin-left but when I try to get the right side by using margin-right it doesn't work. Is there another way to do this in CSS?
Here's what I got..
HTML
<div class="Heading">Painting</div>
<hr draggable="auto" color="#FB2529">
CSS
hr { color:#FB2529;
width:100%;
margin-top:-15px;
margin-left:29%;
height:.2px;
}
You can make it work by adjusting the width property in your css.. margin-left and margin-right should also be relative to the width..
when you adjust the margin in the left, the width is still 100% in the page and so, the right overflows...
to fix that, I suggest using this:
hr {
color:#FB2529;
width:98%;
margin-top:-15px;
margin-left:1%;
margin-right: 1%;
height:.2px;
}
as you can see the sum of width, margin-left, and margin-right totals to 100% representing the width of the area.. if you want to set it instead in pixels, you can.. however, you should know the specific width in pixels also..
I have an element with:
position:absolute;
left: 70%;
can I configure element for example to not move from left more than 900px?
something like max-width but for positioning?
You can use CSS3 Media Queries to achieve that
So:
#element {
position:absolute;
left: 70%;
}
If you don't want it to overlay an object when you have a smaller screen or resize the
window, you can add after that:
#media all and (max-width: 980px) {
#element{
margin-left: 0px;
left: 220px;
}
}
When the screen width is less than 980px, the #element object will be fixed to 220px.
I was able to do this by using the min() function in CSS.
This only works for me because the thing I'm trying to position on the right side has a constant width.
So I've got this...
#rightFloatyThing {
left: min( calc(100vw - 278px) , 1002px );
}
278px is the width of the floaty thing on the right side. I want to always make sure the right side floaty thing is within view. So it's left position will always at least be the view width minus the right side thing's width.
1002px is the farthest to the right that I want the right side floaty thing to ever get
Edit:
Make sure to check the Can I Use for CSS math functions. It wasn't supported in some major browsers until early 2020.
The only way to do this with CSS is to remove the absolute positioning, and float it to the right.
Put an empty "pusher" div, floated left. Give it a width of 70%, and a min-width of 900px; Then float your element beside it.
Otherwise you'll have to use Javascript.
Alternatively you could wrap the absolutely positioned element with a relatively positioned element which has a min-width.
Please look at this fiddle: http://jsfiddle.net/FnED8/3/
The projects grid items on the right always clear below the #nav element on the left once they pass the first row, I want the items on the right to always stay aligned and never clear. Obviously I can set the height of #nav to something big like 1000px and get the desired result but this isn't the answer.
Essentially I want #nav to be 100% height and #projects to respect this and never clear below, always staying beside it.
Edit - #projects is 90% width to make the grid semi-fluid, this shouldn't affect this problem.
Make your projects-grid like this:-
#projects-grid {
float: left;
width: 300px;
}
http://jsfiddle.net/FnED8/4/
Or whatever width you prefer.
Matt
One possible solution is to set display: inline-block on the #projects-grid element. however bear in mind that you will need to adjust the width, because 90% is too wide to fit next to the #nav.
Updated Fiddle
Is this what you are trying to achieve? http://jsfiddle.net/thebabydino/FnED8/7/
Setting a proper left margin for #projects grid and removing its width of 90% does it.
#projects-grid {
margin-left: 174px;
}
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;
}