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..
Related
3 div.
body margin of 10px.
Picture on the bottom
I want the divs to equally have the same width, the same margins on the sides while also covering/using the whole browser's width whichever size it is (desktop, tablet, mobile)
Here's what I did by using pourcentage and what I believe:
" The full browser width is 100%
If the div's margin are 10px and the body's margin are 10px then
The div's width would be around 30%.
Let's try 30%.
It fits - blank space too.
Let's try 30.5%.
Blank space, it's not equal on the sides.
Let's put 32%.
etc. "
but often I get extra blank space on the right or one div to go down because it's actually too wide.
Is there a more simple way to do this? Properties?
Thank you.
Design:
Media queries:
Your issue stems from the fact that you are mixing relative units with absolute ones - pixels are an absolute unit as 10px is always 10px, but a percentage is relative to the screen width, so no matter how close you can get it to fitting the full width of the screen, as soon as you change the width of the screen all of the values are going to change.
You have (at least) two options here:
First, switch all your units to percentages, so that every measurement is relative to the width of the screen. In other words, if you use percentage based margins, you will know exactly how much space you can allocate to each thing.
Alternatively, if you really need the margins to be an absolute pixel width, use CSS calc:
This feature of CSS allows you to mix unit types easily, and let the browser do the math to figure it out.
For example:
width: calc(33.333% - 20px);
will style the div to take up one third of the screen width, minus the width of a 10px margin on the left and a 10px margin on the right.
If all three divs have this width, the total space taken up will equal to 100% of the screen, with the space for all of the margins accounted for.
(if you want the first and last divs to have no margin on the left and right respectively, just change the calculation to match!)
More Information About 'Calc'
Extra tip! Remember that white-space in your code will add spaces in between your elements, so if you style everything to fill exactly 100% width, these extra spaces may still cause your items to break if you have not dealt with this
I would say the best way to approach this is have container elements for each div, so a structure like this:
<div class="container-full">
<div class="container-third">
<div class="content">
Hello world
</div>
</div>
</div>
.container-full{
width: 100%;
}
.container-third{
width: 33.33%;
padding: 10px;
}
.content{
width: 100%;
}
Utilize padding, instead of margin. Make sure to use box-sizing: border-box
display:flex is already widely suported, so you can rely on that instead of floats.
if you don't use box-sizing:border-box; for all the elements - you could at least for the divs in question along with a 10px padding.
Here goes sass:
.container {
display:flex;
& > div{
flex:0 0 33.33%;
padding: 10px;
box-sizing: border-box;
}
}
or you could use a percentage margin between the divs.
.container div{
width:30%;
float:left;
margin-right:5%;
}
.container div:last-child{
margin-right:0;
}
I'm trying to create a content container in the middle of my site that can be no wider than a certain size (1194px), and will always have at least 242px margins on the left and right sides. If the container is wider than 1194px, the margins will grow. If the container is smaller than 1194px, the margins will stay 242px, shrinking the width of the container. Here's what I'm using and isn't working.
.mainContainer {
margin-left:242px;
margin-right:242px;
max-width:1194px;
}
But the container shrinks to fit the content. If I specify width:100%;, the margins will grow when the container is bigger than max, but the container will not shrink. What am I missing?
As a sub problem; I'm doing this in order to make my page responsive. Inside .mainContainer, there is a series of .projectContainer's, each 384px wide with 7px margin all sides. The width (including margins) of 3 of these adds up to the 1194px of .mainContainer. As of thus far, these values have been static. But now that .mainContainer is going to be fluid, I want the .projectContainer widths to also be fluid—as .mainContainer decreases in width, so should the .projectConatiner's.
My math figures that each .projectContainer, not including the 7px margin on each side, should be taking up 32.160804% of the .mainContainer:
384px * 3 = 1152px
1152px / 1194px = 0.96482412
0.96482412 / 3 = 0.32160804
Yet giving a value of width:32.160804%; to .projectConatiner doesn't seem to work. Is it a rounding error? How could I achieve what I'm looking for?
For the first problem:
see this fiddle
you can define the margin auto for the child div(width 1194 div), and min-width:1194+242+242=1678px for container,
this will make sure there is minimum margin of 242px on both sides, and when the page width increases the margin will increase(not the child width), and child remains 1194px only
<div class='container'>
<div class='child'>1194px</div>
</div>
.container{
min-width:1678px;
height:70px;
background:green;
}
.child{
background:red;
height:50px;
width:1194px;
margin:auto;
}
Use this buddy. No need for responsive css cause this is already responsive.
.mainContainer {
margin:0 auto;
max-width:1194px;
width:100%;
}
try using
#media screen and (max-width : 1194px) {
code css
}
for responsive style
A seemingly simple issue, but other solutions I found didn't quite work here.
Attempting to center '.grid-wrapper-inner' within '.grid-wrapper'
.grid-wrapper {
background:grey;
display:block;
margin:0 auto;
width:90%;
padding:80px 0;
text-align:center;
}
.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
text-align:left;
}
I thought 'display:inline-block' (with 'text-align:center' on the parent) would achieve this, but have hit a brick wall
Best explained here:
http://jsfiddle.net/YrF9C/1
Essentially need to prevent grid-wrapper-inner from taking up 100% of its parent div so it can be centered.
I did get the green boxes (see link) centered by using inline-block on those, but orphaned boxes at the bottom were then centered, which isn't the desired effect.
Many thanks in advance for any help!
You have to set width to .grid-wrapper-inner. You can try set 90%, you will notice the difference.
.You could do one of two things:
add a width to the inner wrapper
.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
width:80%;
text-align:left;
}
or you could add padding to .grid-wrapper
You can use margin:auto to center horizontally, but for that to work the inner div you're trying to center needs to have some sort of width specified. Otherwise it just stretches and the auto margin is 0. Technically this is centered too, but not what you want.
For example try adding width: 86% to .grid-wrapper-inner.
Alternatively if you don't want to set a width, you'll need to set an actual margin that's the same left and right, e.g. change margin:0 auto; in .grid-wrapper-inner to margin: 5% or margin: 50px.
Instead of padding:80px 0; change it to padding:80px;. You are setting the padding only for top and bottom but the left and right is 0 so the inner div is expanding up until the left & right border of the wrapper div. Its still centred both vertically and horizontally just padding is 0 on the left and on the right.
Setting width to .grid-wrapper-inner, would solve your problem, but apparently you cannot or don't want to do it. Then, if you still want to make the layout adapt to screen size, perhaps you could think about using CSS media queries?
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'
Is it possible to have 100% height but have the div fill out the entire page only.
So if i put 100% height on a div, it should extend the div all the way down to the end of the page but not extend anymore to bring any scroll bars. Is that possible? I know height:100% takes the page's height and puts the div's height to that number but I don't want the div to actually have the height of that number, but only extend till end of page, no more than that.
Is it possible with 100% height or anything else?
I appreciate your help.
Thanks
you can use
<div style="top:0;bottom:0,left:0,right:0;"></div>
or using jquery:
$("#mydiv").height($(window).height());
Without padding or border, if you declare the html, body, and div 100%, it will extend to the size of the browser window.
If you want to use padding and border, consider using the CSS3 property box-sizing: border-box;
Demo
Update:
Using pseudo-elements (you could use an empty div):
.top{height:100px; width:100%; position:absolute; top:0; left:0;}
.rest{min-height:100%; background:lightblue; }
.rest:before{content:''; display:block; width:100%; height:100px;}
Demo