There are many div blocks. One parent, the second inside the left (for the menu), the second inside the right (for the text). How it is possible to stretch the right inner block (it is possible with the left one) to the entire height of the parent block. The parent block it has min-height:1100px
Here's the code:
<div id="wrapctr">
<div id="leftmenu"></div>
<div class="rightcontent">
//common div
<div style="padding: 10px; width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; background:white">
// img div
<div style="float: left; padding: 10px; text-align: center; width: 257px;"><img src="../img/1625.jpg" width="200"></div>
</div>
</div>
</div>
CSS
#wrapctr {
width:80%;
min-width: 700px;
max-width: 1200px;
background:#FFF;
margin:0 auto;
min-height:1100px;
z-index:2;
}
#leftmenu {
background: #FFF;
float: left;
width: 250px;
list-style: none;
}
.rightcontent {
background: #FFF;
margin-left: 255px;
}
One page show 12 images are issued in three in a row. If i added position:relative and absolute with height:100% my div with style comes out of rightcontent div
You should give wrapctr position relative
and position absolute to your common div
and then you can give height 100% to the common div
Related
is there a way to do margin-right auto (always move div to right). I tried margin-right: auto; and margin: 0 0 0 auto; didn't work.
Margin parameter work like this :
margin : top, right, bottom, and left,
So it should be: 0 auto 0 0
by the way flex is also a very nice position :
.one{
display: flex;
width:100%;
justify-content: flex-end;
background-color:red;
}
.element-right{
width: 50px;
background-color: blue;
}
<div class="one">
<div class="element-right">BOX</div>
</div>
You can achieve that as well with a little help from a wrapper over your original div:
HTML:
<div class="right-wrapper">
<div class="right">
</div>
</div>
CSS:
.right-wrapper {
text-align: right;
}
.right {
display: inline-block;
}
This works because the contents of the parent .right-wrapper are set to behave like text while keeping their block behavior (display: inline-block). This causes the child div to react to parent's text-align: right.
In some cases you might find that the child div is inheriting a width property and is full width. It's useful to then set child's width property to auto in case the child element is supposed to be some sort of a button or other, smaller element aligned to the right side.
.right {
display: inline-block;
width: auto;
}
You can use margin-left: 100%. If you want to define other margin values, you can use the shorthand margin: 0 0 0 100%, for example. This will "push" the div to the right of the container.
You could always use the text-align method on divs
.parent{
text-align: right
}
.child{
display: inline-block
}
.parent {
width: 100%;
height: 40px;
background: #000;
display: flex;
justify-content: flex-end;
}
.parent .child {
width: 100px;
height: 100%;
background: blue;
}
<div class="parent">
<div class="child"></div>
</div>
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I have three divs one main and two in it. Inside the main div is navbar and content div, which contains the form with textarea. Textarea is only vertical resizable. Content and navbar have min-height: 100%, main has min-height: 1200px. The height of main and content divs is changing by textarea size (thats what I want), but navbar has still 0px and is "invisible".
.navbar {
width: 250px;
min-height: 100%;
position: relative;
background-color: #121212;
float: left;
}
.main {
margin: auto;
min-width: 1200px;
float: left;
}
.content {
width: 950px;
min-height: 100%;
background-color: #1c1c1c;
color: white;
float: left;
}
form {
width: 100%;
height: 100%;
float: left;
}
textarea {
min-height: 297px;
resize: vertical;
width: 800px;
height: 770px;
}
<div class="main">
<div class="navbar">
<!-- some links -->
</div>
<div class="content">
<form>
<textarea name="article">
</textarea>
</form>
</div>
</div>
How can I make navbar same height as content?
Using min-height: 100% on content that can change the height of the parent (i.e. it's within the flow of the parent, not absolutely positioned) obviously comes with the problem that it can cause the height to infinitely increase. If min-height is 100% and you have padding: 10px too, then the height of the child will increase, increasing the parent height and causing a loop.
As such, adding min-height: 100% will not work.
It's perhaps better to use flex for setting the height, such that you have display: flex; align-items: stretch on the parent. The align-items: stretch will cause the child elements of that parent to 'stretch; to the same height.
For example:
.main {
display: flex;
align-items: stretch;
justify-content: space-between;
...
}
The justify-content: space-between can also be changed to suit.
A complete guide to flex can be found here
I have a container div (that cannot be floated) with two children elements. I want child elements to be on opposite sides - first on left, second on right. On 100% browser width children summary width is less than container, but on greater scales it is not, so container should be greater too. How to set container to grow when it's gloat child grow?
UPD: something like this
I need all elements to stay one line in any scale.
<div id="page">
<div id="container">
<div id="left">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div id="right">
right
</div>
</div>
</div>
<style>
#page {
background-color: grey;
width: 100%;
height: 300px;
}
#container {
/*this styles are needed to other parts*/
position: relative;
clear: both;
/*=====================================*/
background-color:red;
height: 50px;
width: 90%;
margin: 0 5%;
}
#left {
float: left;
background-color: blue;
}
#left div {
width: 50px;
display: inline-block;
}
#right{
float: right;
background-color: green;
display: block;
max-width: 200px;
}
</style>
.container {
display: flex;
justify-content: space-between;
}
It should do that.
Google up FlexBox Introduction for good explaination.
something like this ?
I've used display:flex to let the two divs line up nicely, floats only needed for the inner boxed
https://jsfiddle.net/070rk2e1/1/
I am trying to set the width of a div element to the width of it's longest child element, which in this case happens to be a div that I want locked to the bottom of the parent div. I am also not using a fixed height for the parent, because I do not know how big the children will need to be
Here is my html/css:
HTML:
<div id ="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
CSS:
#header-right{
background-color: red;
position: relative;
display: inline-block;
height: 300px; /*The actual width is unknown, this is just for example*/
}
#content1{
background-color: blue;
width: 200px;
height: 100px;
}
#footer{
background-color: cyan;
position: absolute;
bottom: 0;
width: 300px; /*Also an unknown value*/
height: 25px;
}
You can have a look at this jfiddle to see what happens:
https://jsfiddle.net/rkdqp9m5/2/
You can see the container div ignores the footer, since it is absolutely positioned.
However, if I do not use absolute positioning for the footer, then I cannot lock the footer to the bottom of the div, as you can see in this jfiddle
https://jsfiddle.net/rkdqp9m5/3/
I want to lock the footer to the bottom of the container, but I also want the parent's width to be based off the footer. I do not want to use tables for this, and I do not wan to used fixed widths or heights, as the container's and the footer's dimensions will be based off of images whose widths I do not know.
Edit: I would also like to keep this strictly in HTML/CSS, if possible
If you're OK with browser requirements of flexbox, you could do:
#header-right {
background-color: red;
padding: 20px 0px 0px 0px;
height: 300px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
#content1 {
background-color: blue;
width: 200px;
height: 100px;
align-self: flex-start;
}
#footer {
background-color: cyan;
width: 300px;
height: 25px;
align-self: flex-end;
}
<div id="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
JSFIDDLE DEMO with all the necessary vendor prefixes.
Does this help: Relative parent DIV to inherit the width of absolute child DIV
What it suggests is that you can't use pure CSS, but you can use Javascript to achieve what you're trying to do.