How to style this div both with a min-width and width
css
#diva {
position: relative;
margin: 0 auto;
min-width: 75px;
width: auto;
height: 50px;
padding: 4px;
color: white;
background-color: red;
}
html
<div id="diva">
hello
</div>
When i set width to auto, this div occupies the full page width.
display:inline-block;
Just add display:inline-block; to the styles for the div. That should work :)
http://jsfiddle.net/432kxywu/
Related
index.html
<div name="MainContent" id="MainContent" class="MainContent">
</div>
index.sass
body, html
border: none;
outline: none;
background-color: #FFF;
color: #000;
margin: 0 0 0 0
#MainContent
border: none;
outline: none;
position: relative;
background-color: #000;
color: #FFF;
margin: -250px 0 0 100px;
float: left;
width: 2000px;
min-width: 2000px;
max-width: 2000px;
height: 500px;
min-height: 500px;
max-height: 500px;
top: 50%;
Horizontal scrolling is working, however, only by using the bar at the bottom of the page. If i attempt to use the scroll wheel the page will not scroll. Any ideas as to why that is and how to make that work?
To remove your body scroll property, add overflow:hidden to your html or body styles.
body,html {
overflow:hidden;
}
To make your div scrollable, set its width to 100%, and enable horizontal scrolling by adding overflow-x:auto. Now the width of the div will be 100% to the body , and if the content inside the div has higher width, then the scroll will get enabled.
#MainContent {
width:100%; /* you can even set a static width here, which could be less than the body width*/
overflow-x:auto;
}
NB: Please REMOVE the min-width:2000px and max-width:2000px from the #MainContent style
Here is my HTML structure:
.parent{
background-color:#f7f7f7;
width: 100px;
height: 100px;
border:2px solid;
}
.child{
height: 100%;
width: 100%;
background-color:#cf5;
padding: 15px;
}
<div class="parent">
<div class="child">something</div>
</div>
As you see div.child goes out of div.parent. That's because of padding: 15px;. Well, how can I calculate this in CSS:
.child{
height: (100% - the number of padding);
width: (100% - the number of padding);
}
So this is expected result: (noted that there also should be padding: 15px)
Just add box-sizing: border-box to the child element.
.parent {
background-color: #f7f7f7;
width: 100px;
height: 100px;
border: 2px solid;
}
.child {
height: 100%;
width: 100%;
background-color: #cf5;
padding: 15px;
box-sizing: border-box; /* NEW */
}
<div class="parent">
<div class="child">something</div>
</div>
The CSS box-sizing property has an initial value of content-box. This means the box model calculates total width by adding the content plus padding plus borders. The calculation is similar for height.
With border-box, the box model includes padding and borders in the width / height calculation.
(Note that margins are always outside the calculation; they will be appended whether in content-box or border-box.)
A second possibility (arguably less efficient than box-sizing) would be the CSS calc function:
.parent {
background-color: #f7f7f7;
width: 100px;
height: 100px;
border: 2px solid;
}
.child {
height: calc(100% - 30px); /* NEW */
width: calc(100% - 30px); /* NEW */
background-color: #cf5;
padding: 15px;
}
<div class="parent">
<div class="child">something</div>
</div>
Use a margin instead:
.child{
height: 100%;
width: 100%;
background-color:#cf5;
margin: 15px;
}
Just set the width, height, and margin in the child class. The parent class is just the wrapper it only needs styles that are specific to it. i.e. The background color and the border.
.parent{
background-color:#f7f7f7;
border:2px solid;
}
.child{
height: 100px;
width: 100px;
background-color:#cf5;
padding: 15px;
}
The child class pushes out of the parent because you set its dimensions to be fixed and the child to 100% of that. You then set the padding which push the child out of the parent.
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
I am trying to make a div inside another one exactly in the middle. Is there any better way to do that?
body, html
{
margin:0;
height:100%;
}
#master_wrapper
{
width:100px;
height:100px;
background:#57a957;
}
#header
{
left:50%;
width:50%;
height:50%;
background:red;
}
<div id="master_wrapper">
<div id="header">
Header
</div>
http://jsfiddle.net/uba1wr52/
You can make the inner div exactly in the middle by adding style "margin: 0px auto" to the #header in the css file.
Just so you know, a lot of your css is pointless/redundant since you've not set your positioning of your classes. I.e. to use top:... left:... right:... and/or bottom:... you need to have set your positioning to absolute;
The snippet below allows you to horizontally and/or vertically center your div element:
html,
body {
padding: 0;
margin: 0;
}
#master_wrapper {
width: 100px;
height: 100px;
background: #57a957;
position: relative;
}
#header {
position: absolute;
width: 50%;
height: 50%;
background: red;
margin:0 auto; /*horizontally center*/
left:0;
right:0;
-webkit-transform: translateY(50%); /*vertically center*/
-ms-transform: translateY(50%);
transform: translateY(50%);
}
<div id="master_wrapper">
<div id="header">
Header
</div>
An example how to place a HTML Element in the middle horizontal and vertical
<!DOCTYPE html>
<html>
<head>
<title>Div in middle</title>
</head>
<body>
<div style="
background: red;
width : 300px;
height : 100px;
">
<div style="
background : #fff;
width : 123px;
height : 67px;
margin : 0 auto;
position: relative;
top : 50%;
transform : translateY(-50%);
">
Div in middle of other div
</div>
</div>
</body>
</html>
You can test in live editor if you want
margin: 0 auto;
This will automatically horizontally center your div with top and bottom margin of 0; You can also do:
margin: 0 auto 0 auto;
In order to control top and bottom margins, margin values go like:
margin: top right bottom left;
width: 100%; // can be in pixels also.
margin: 0 auto;
Try with padding: http://jsfiddle.net/5oxg9aay/1/
body, html {
margin: 0;
height: 100%;
}
#master_wrapper {
width: 58px;
height: 58px;
background: #57a957;
padding: 4%;
}
#header {
background: red;
width: 100%;
height: 100%;
}
or use a position: absolute; in the header and work with left/right/top/bottom but you need to make #master_wrapper the mother container for #header.
I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}
I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}