This question already has answers here:
Position fixed element with percentage width relative to container
(2 answers)
Closed 8 years ago.
I would like to make one of column in my layout fixed. Unfortunately when I make it fixed it doesn't fit to parent div width. Is there any way to achieve that.
Html:
<div class="row" style="margin-left: 100px;">
<div class="col-sm-9">
</div>
<div class="col-sm-3">Content</div>
</div>
Css:
.col-sm-9 { background: red; color: white; }
.col-sm-3 { background: blue; color: white; position: fixed; right: 0; }
Here is jsfiddle that demonstrate my problem: http://jsfiddle.net/F5VmF/2/.
You should remove your position fixed from your .col-sm-3 div, and insert another div inside it with a position absolute. And whenever you scroll the page, you will change the top position of that div. Here is the example. And here is the code.
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 months ago.
I have 3 divs:
<div>
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Every div have a width: 100%.
The title div height depends on its content so it can evoluate a little bit, and it has a fixed position.
The Footer div has a fixed size (its content cannot change) and a fixed position.
The goal is to have the text div between this two divs, having its size exactly matches the remaining places between title and text div so I can apply a scroll on it.
Can somebody explain to me how to do that ?
Thanks
I assume you want something like this:
#div1 {
background: rgba(0,0,250,0.2)
}
#div2 {
flex-grow: 1;
background: rgba(0,250,0,0.2);
overflow: scroll;
}
#div3 {
height: 10vh;
background: rgba(250,0,0,0.2);
}
.container {
height: 100vh;
flex-direction: column;
display: flex;
}
<div class="container">
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Judging by the clarification in your comment what you're trying to achieve is a basic layout which should be done using the <header> and <footer> tags rather than reinventing the wheel with divs.
However if you're set on using divs you should use position: absolute; or position: fixed; on the #div1 and #div3 depending on what you need the to do. Using this method you should add apropriate margins to make sure div1 and 3 dont cover div2.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
why the layout is messed up?
why the p element is doing this?
why the first div is a little bit closer to the bottom of the page
#pricing div {
display: inline-block;
width: 30%;
height: 200px;
border: solid 2px black;
}
<section id="pricing">
<div id="plan-1m">
<!--try without p -->
<p>why this p messes up the layout?</p>
</div>
<div id="plan-3m">
</div>
<div id="plan-12m">
</div>
</section>
You should add vertical-align: top; to your div element.
The default value is vertical-align: baseline;, and for what I understand from the documentation, it tries to align the bottom of your p with the bottom of other divs (because they don't have any content)
This question already has answers here:
inline-block boxes not fitting in their container [duplicate]
(2 answers)
Mystery white space underneath image tag [duplicate]
(3 answers)
Closed 5 years ago.
I've these four div tags arranged in 2x2 grid (middle one only for line break)
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class=""></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
Along with this css:
.rectangle {
width: 25px;
height: 25px;
background: #ccc;
display: inline-block;
margin: 0px; /* doesn't work */
padding: 0px; /* doesn't work */
}
JSFiddle result output shows gaps between the rectangles. Is there a way to get rid of the gaps?
http://jsfiddle.net/brMPs/958/
You could either float the rectangles left or zero out the font size for the hidden spaces between the DIV tags. Here, try this adding a container div and using
.container {
font-size: 0;
}
http://jsfiddle.net/brMPs/963/
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<div class="rectangle"></div><div
class="rectangle">
</div>
<div class=""></div>
<div class="rectangle"></div><div
class="rectangle">
</div>
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
This question already has answers here:
Opacity of div's background without affecting contained element in IE 8?
(8 answers)
Closed 7 years ago.
I'm trying to set an opacity to my background div, but all the content inside gets an opacity too. I don't want this.
I tried to fix it with pseudo elements but it didn't work out, I can fix this problem by adding a second background div and setting a height and position to that div, but I don't want to set a height for a div.
How can I fix this without adding a second div and height?
You can see my demo here
You could always use an RGBA value:
html {
background-color: red;
}
#login {
width: 365px;
background-color: rgba(255, 255, 255, 0.3);
padding: 37px;
}
https://jsfiddle.net/d2shse4c/2/
What i usually make to do this is sibling divs with position absolute:
<div id="page">
<div id="content">
TEXT here
</div>
<div id="back" style="position:absolute; opacity:0.5; left:0; top:0; width:100%; height: 100%; background-color:#000000;">
</div>
<div id="anotherText" style="position:absolute; width:100px; height: 100px">
TEXT
</div>
</div>
and so on....
OR:
Set a png background image on the parent div!
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Make outer div be automaticly the same height as its floating content
I feel like I'm missing something very simple here...
We have a simple setup: a parent div that contains a child div.
I want to:
make the parent resize its height based on the child
align the child to the right edge of the parent instead of the default left.
Using float:right will cause the parent to no longer resize correctly and the child to 'jump out' of the parent.
I've tried using align: right and text-align: right but so far no dice.
HTML:
<div id="parent"> <p>parent</p>
<div class="child"> <p>child</p> </div>
<div class="child right"> <p>child2</p> </div>
</div>
CSS:
div{ padding: 15px; margin: 5px; }
p{ padding: 0; margin: 0; }
#parent{
background-color: orange;
width: 500px;
}
.child{
background-color: grey;
height: 200px;
width: 100px;
}
.right{ float: right; } // note: as the commenters suggested I should also be using a float:left on the other child.
Result:
What I want:
Any suggestions on what I could change either with #parent or .right to make child2 align to the right properly?
EDIT
The best fix I found for this is just using display:table on the parent. Though I haven't tested this in IE it fixes the issue in the browsers I care for and avoids using the un-intuitive overflow:hidden method discussed in the comments.
Even better: set margin-left of the child to auto.
Try floating the contents and adding overflow: hidden to the parent. It's counter-intuitive but worked for me with a similar issue.
EDIT: Also float the first child to the left.