Is there a way to center element horizontally in page with margin auto but also to have 100px left and right if viewport gets smaller, so it would be like this together:
margin: 0 auto;
margin-left:100px;
margin-right:100px;
Or do I need to have parent container for this?
the problem with auto is you can't even use it with calc(auto + 100px)
the most better and accurate way is to use flex
the justify-content property will center your element like margin: 0 auto; and you still have a room to play with margin
.parent{
height: 200px;
background: gray;
display:flex;
justify-content:center; /*center element*/
}
.child{
height: 100px;
width: 200px;
background: yellow;
margin: 0 100px; /*adding margin*/
}
<div class='parent'>
<div class="child"></div>
</div>
You can use border-left and border-right to add a border to the element's left and right hand side. Make sure you set the border color to transparent and add background-clip: padding-box to make sure the border is truly invisible:
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
background-clip: padding-box;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
<div class="centered"></div>
Another approach is to use a parent element with padding:
.parent {
padding: 0 100px;
}
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}
<div class="parent">
<div class="centered"></div>
</div>
Depending on your use case you might be able to use the <body> as the parent, saving you from adding an otherwise superfluous parent element:
body {
padding: 0 100px;
}
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}
<div class="centered"></div>
You could use padding for this
Related
I have the following webpage.
I am trying to get the blue red and white gradient to fill the entire height of the screen. Currently I have both flags on either side of the content container, all of them are surrounded by a main container.
.container{
width: 100%;
background: -webkit-linear-gradient( $blueToRed);
background: -o-linear-gradient($blueToRed);
background: -moz-linear-gradient($blueToRed);
background: linear-gradient($blueToRed);
margin-bottom: -99999px;
padding-bottom: 99999px;
overflow: auto;
}
is inside of firstContain
.firstContain{
border-left: 4px solid white;
border-right: 4px solid white;
background: #FFF;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
I am trying to get contain to be 100% height, but I add that and it doesn't move. I thought the 99999 margin padding trick would work, and it did, but then I lost some css that made it work. Any help is welcome. Thanks in advance for the advice in what I am doing wrong.
Try vh unit.
.container{
min-height:100vh;
}
Try adding height: 100% in both your html, body, .container in your styles like this:
html, body, .container {
height: 100%;
}
.container {
border-left: 4px solid white;
border-right: 4px solid white;
background: #333;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
<html>
<head>
</head>
<body>
<header></header>
<div class="container">
<p>Website Content</p>
</div>
<footer></footer>
</body>
</html>
For now, maybe you can go with
min-height: 100%;
in your container css, since there are no elements in the page to cover the height. So, min-height should do the work for you!
I have created a grid and now have problems with max-width. I want to have containers which take up the available width and are restricted by a left and right margin. This containers can contain children. These children may be bigger then the parent container and may be moved with the class .move-to-right-border to the right border to take up full width on the right.
I now have added a max-width to the container, to restrict the width. But now i have the problem that i can't set child elements to take up full width. I tried with 100vw, but width 100vw the scrollbar is included. Has anybody a solution for this problem?
Maybe it gets more clear with this example, comment max-width in and out to see what i want.
.row-right {
box-sizing: border-box;
margin-left: 200px;
margin-right: 100px;
max-width: 700px; /* to see the problem comment max-width in and out */
width: calc(100% - 100px - 200px);
border: 1px solid red;
}
.move-to-right-border {
box-sizing: border-box;
width: calc(100% + 100px);
border: 2px solid blue;
}
http://codepen.io/anon/pen/eJymOL
just use below css
CSS
.row-right p {
text-align: justify;
width : 100%
}
Hope this will help you :)
I think u r after something like this:
.parent{
position: relative;
height: 300px;
padding: 10px 0;
background-color: #99ff99;
text-align: center;
}
.container{
width: 200px;
margin: 0 auto;
height: 100px;
padding: 30px 0;
background-color: #ff9999;
}
.child{
position: absolute;
width: 100%;
height: 50px;
left: 0;
background-color: #9999ff;
}
<div class="parent">
This is parent
<div class="container">
This is container
<div class="child">
This is child
</div>
</div>
</div>
I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>
You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}
if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/
I am aware about the concept of 'margin-collapse'. But , why am I not able to see 10 px margin on the top of the first box here. The top box(which has the id 'first') should have 10px margin above it. If this is not the correct wat to get it, then what is it? And, why this doesn't work.
CSS:
#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;
}
.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}
HTML:
<div id="Main">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
I know one way could be that we can give 10px padding to the parent div. But then why doesn't this thing work?
The margin: 10px 10px 10px 10px in your code moves the "Main" box as well.
If you want to move the box with id "first" only, use position:relative; top: 10px;
jsfiddle demo
edit: I don't know to say for sure why this happens but my guess is it is because the display of the "Main" box is block by default.
When you use display: inline-block; on the "Main" box, the problem is fixed. (jsfiddle)
This is how browsers interperit the code. It does not output the expected result which would be a 10px gap between the top of the child and the outter parent. You could add padding-top to the parent, alternatively you could assign overflow:auto; to your main div.
DEMO http://jsfiddle.net/kevinPHPkevin/2f4Kz/4/
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
overflow:auto;
}
Another way around this is to add a transparent border around the main div (stops margin collapsing)
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
border: thin solid transparent;
}
The third a final option (to my knowledge) is to stop the margin collapsing by setting padding-top: 1px; margin-top: -1px; to the parent div
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
padding-top: 1px;
margin-top: -1px;
}
I have two DIVs inside one DIV. One of the DIVs is floated left, and so, the other div is to fill outer window.
If I enlarge or shrink the outer DIV I want inside DIVs to fill outer DIV in any case.
The sample code:
<div id="main_container">
<div id="left_container"></div>
<div id="right_container"></div>
</div>
and CSS rules are
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
}
#left_container{
margin: 10px;
height: 100px;
border: 1px solid red;
float: left;
overflow: hidden;
min-width: 200px;
}
#right_container{
margin: 10px;
height: 100px;
border: 1px solid magenta;
min-width: 200px;
overflow: hidden;
}
Here is the jsfiddle code.
Reize the html window, you will see red one is not filling it when the other is on the bottom.
Edit: To clarify, I added images
#media screen and (max-width: 441px) {
#left_container{
float: none;
}
}
441px just an example (two blocks min-width + side margins + border - 1).
Add
width: 98%;
(Adjust as necessary)
To #left_container and #right_container
Give min-width to the main div.
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
min-width: 400px;
}