Dear Friends I am so struggling on about a problem came to me in my web design.
My layout as follows,
<div class="main_div">
<div class="left_column">
<div class=="fixed_div"></div>
</div>
<div class="mid_column"></div>
<div class=="right_column"></div>
</div>
and css file look like
.main_div{
float:left;
width:80%;
}
.left_column{
float:left;
width:20%;
}
.mid_column{
float:left;
width:40%;
}
.right_column{
float:left;
width:20%;
}
What i wanted to do is i need to make the fixed_div fixed inside the parent element and give the width to 100%. But it always comes out of the left_column. How would i overcome this problem please help. Thanks
Please note that sometimes i am changing left_column's width from jquery.So at that time the fixed_div must also adjust as the left_column.
For block elements your issue is fixed by default cos they have width: auto;. Do not adjust #fixed_div width at all and it'll work.
P.S. Using IDs for selecting all elements in css - isn't a good style, better rework it to the classes.
You have floated all elements for this you must use clearfix technique to remove any error. And set .fixed_div to display: block; . If this do not help you please place a Demo. What actually you have been in problem.
This should help:
.fixed_div {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.left_column {
position: relative;
float:left;
width:20%;
}
Related
Greetings
I have serius problem, I need to move div in div in a div, but it doesn't work.
My question is if there couldn't be some problems with negative margins or child element of element with margin problem.
It seems negative margin is collapsing with positive margin in child element.
The margin of child element is moving parrent element.
here is fiddle
of my problem.
What I want to achieve is that:
a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.
b. Text is margined inside of an article div. From top.
<div class="container">
<div class="main-heading"><h1>Main Heading</h1></div>
<div class="wraper">
<div class="article">
<div class="text"><p>Text</p></div>
</div>
</div>
</div>
Also here is some of problem in css:
div {
width: 100%;
}
.container {
}
.heading {
}
.wraper {
margin-top: -100px;
height: 500px;
}
.article {
margin-top: 0;
height: 200px;
}
.text {
margin-top: 120px;
height: 50px;
}
As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.
Thank you verry much for your time
edit: picture of what I want to achieve
That black rectangle is wrapper,
cat is article
text is text, but the margins move whole article now.
I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...
I used
overflow: auto;
On parrent element, and it worked.
Based on your comment and what I think you're asking:
<div class="image">
<p>PRESTO</p>
</div>
.image {
display:block;
position:relative;
background-color:grey;
width:300px;
height:200px;
}
p {
display:none;
position:absolute;
top:0;
width:100%;
text-align:center;
color:orange;
font-size:2em;
}
.image:hover > p {
display:block;
}
FIDDLE:
https://jsfiddle.net/su5aqs3p/2/
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
I'm trying to recreate this:
However, I'm having trouble positioning everything. What's the best way to go through this?
Current HTML:
<div id="container">
<div class="wrap">
<div id="interview">
<h1>INTERVIEW: JOHN HUNT</h1>
</div>
<div id="article">
<h2>ARTICLE: WOMEN IN SURFING</h2>
</div>
</div>
Current CSS:
#container{
width:918px;
height:429px;
background-color:#cdcccc;
clear:both;}
.wrap{
width: 620px;
margin-left:10px;
margin-top:10px;}
#interview{
width:652px;
height:179px;
background-color:#FFF;}
#article{
width:652px;
height:179px;
background-color:#FFF;}
By default div elements are on top of each other, so if you want your subscribe section to be on the right you will have to float it right.
And wrap your left div's in a parent container div. That's the basic idea.
#interview and #article are larger than .wrap which is not what you want !
Plus, add to your CSS:
#interview{
position: relative;
margin-bottom: 10px;
}
#article{
position: relative;
}
This would help you !
For this type of layout try to use a GRID SYSTEM layout.
Visit 960GS website for help.
When I assign a percentage height in the following div, why does it get out? Thanks you in advance.
HTML:
<div id="div1">
Test<br/>Test<br/>Test<br/>Test<br/>
<div id="div2">Test</div>
</div>
CSS:
body{
margin: 0
}
#div1{
position: absolute;
width: 200px;
height:100%;
right: 0;
background-color: #467
}
#div2{
width: 50%;
height: 99%;
background-color: black;
color: white
}
Well, the reason why #div2 extends below #div1 is because in addition to being 100% the height of its parent, #div2 is also pushed down by the four lines of text above it - so it extends exactly that distance outside of #div1.
How to solve this, then? Well...I can offer a CSS solution, but it's not very flexible (a solution that employs JavaScript would definitely be more scalable, and less work to maintain). I modified your HTML structure slightly, so now it looks like:
<div id="div1">Test
<br/>Test
<br/>Test
<br/>Test
<div id="div3">
<div id="div2">Test</div>
</div>
</div>
To clarify my changes, I added the #div3 element around #div2. Now, for my CSS, I just added this definition for #div3, and modified the body CSS to:
body {
margin: 0;
line-height:1.3em;
}
#div3 {
position:absolute;
top:5.2em;
bottom:0;
left:0;
width:100%;
}
This approach requires that you know how far from the top of #div1 you want #div3 (and its child #div2) to start, which by extension requires you to know exactly how tall those four lines of text are. Since browsers often render text with slightly different line heights, I specified one for the <body>. After that, it is a fairly simple matter of multiplying that line height by the number of lines of text (four in this case), and setting that as the top attribute.
Here's a JSFiddle to demonstrate what this achieves. I hope this answer was clear, and is what you're looking for! If not, let me know and I'll try to help further. Good luck!
it gets out because of the overflow property you are missing. Set it to hidden on #div2 ok?
good question. Test<br/>'s count as extra size. same if you use padding, it counts extra size. You can use position absolute to child element. I fixed the problem. check this fiddle
in div1, use position: fixed; instead of position: absolute;
jsfiddle
<body style="min-height:2000px;">
<div id="test" style="position:relative;bottom:0;">
some dynamically changed content
</div>
</body>
What do i expect:
-If #test height is greater or equal to body's it should stick to bottom (as it happens now cuz of block model)
-If #test height is less than body's it should however stick to bottom, having white space above it. (which doesn't happen, #test doesn't stick to bottom).
-Using position:absolute is not acceptable as then #test will not influence body height when #test is higher than body.
-Using position:fixed is not acceptable as then #test will stick to bottom of window, not body.
Q: Can I get what I expect using css only? How?
Sorry for poor English, however I think the question is easy to understand.
Thank you.
P.S.: I need that in css because some dynamically changed content is changed via js and I want to avoid recalculating #test div position each time it changes.
UPD:
I've also tried some display:inline-block; vertical-align:bottom; stuff still no result.
UPD2:
Thank you guys, still it seems, that easiest way is just to add a couple of lines to my javascript to recalculate body height on #test height change.
I know it's an old question, but you could try doing:
top: 100%;
transform: translateY(-100%);
Transform operates with the size of the element itself, therefore it will climb back to the container at the very bottom. You can use letters for all 3 axis.
Because of the dynamic height nature of #test you cannot do this with CSS alone. However, if you're already using jQuery, a quick .height() call should be able to get you what you need (#test height needs to be subtracted from positioning it 2000px from the top).
<style>
body {
min-height: 2000px;
}
#test {
position: relative;
top: 2000px;
}
</style>
<script>
var testHeight = $("#test").height();
$( "#test" ).css({
margin-top: -testHeight;
});
</script>
The only two pure-CSS ways to create sticky footer of dynamic height I know are using flexboxes (no support in IE9-, unfortunately) and using CSS tables:
html, body {
height: 100%;
margin: 0;
}
body {
display: table;
width: 100%;
min-height:2000px;
}
#test {
display: table-footer-group;
height: 1px; /* just to prevent proportional distribution of the height */
}
It is very much possible using relative position. this is how you do it.
Assume height of your footer is going to be 40px. Your container is relative and footer is also relative. All you have to do is add bottom: -webkit-calc(-100% + 40px);. your footer will always be at the bottom of your container.
HTML will be like this
<div class="container">
<div class="footer"></div>
</div>
CSS will be like this
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.footer{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Live example here
Hope this helps.
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE6 */
* html #footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
JSFiddle: http://jsfiddle.net/As3bP/ - position: fixed; is the obvious way of doing this, and if this affects your layout, try posting your problems here. It'd be easier to modify the CSS of your content than trying to find another way of doing this.
The IE6 expression is not good for speed at all but it works, read about that here: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html
EDIT Read your edits, please forget the above. To be stuck at the bottom of the body, it'd be easy to position it in your HTML. This is simple stuff, please post example code if you need further help. Positioning something at the bottom of the page, by default, positions at the bottom of the page.
JSFiddle: http://jsfiddle.net/TAQ4d/ if you really actually need that.
short answer: No YOU can't do this with pure css because it is just the reversed direction to the normal flow of page (I mean bottom to top);
you can use this plugin which is very easy to use stickyjs;
use it with bottomSpacing: 0
EDIT
this plugin uses position: fixed too!
then I think you should write it down by yourself or have someone to write it for you :D
if u dont want to use position:absolute; left:0; bottom:0; then u may try simple margin-top:300px;...
Yes it is Posiible with CSS only:
HTML:
<body>
<div id="test">
some dynamically
changed content
</div>
</body>
CSS:
body{
line-height: 2000px;
}
#test{
display: inline-block;
vertical-align: bottom;
line-height: initial;
}
JSFiddle
If you want to have the text on the bottom of the screen then you can use:
body {
line-height: 100vh;
margin: 0px;
}
here are solution I come up with
<ul class="navbar">
<li> Welcome <i></i></li>
<li> Portfolio <i></i></li>
<li> Services <i></i></li>
<li> Blogs <i></i><i class="arrow right"></i>
<ul class="subMenu">
<li> Why Did Mint Net CMS Born <i></i></li>
<li> Apply AJAX and Mansory in gallery <i></i></li>
<li> Why did Minh Vo create Mint Net CMS <i></i></li>
</ul>
</li>
<li> About <i></i></li>
<li> Contact <i></i></li>
<li> Estimate <i></i></li>
</ul>
<style>
.navbar {
display: block;
background-color: red;
height: 100px;
}
li {
display: table-cell;
vertical-align: bottom;
height: 100px;
background-color: antiquewhite;
line-height: 100px;
}
li > a {
display: inline-block;
vertical-align: bottom;
line-height:initial;
}
li >ul {
display: none;
}
</style>
We do like that:
Html:
<body>
<div id="bodyDiv">
<!-- web site content is here -->
</div>
</body>
<footer>
<!-- Footer content is here -->
</footer>
Jquery:
$( document ).ready(function()
{
$('#bodyDiv').css("min-height",screen.height);
});`
dynamically change content element min-height attribute according to screen resolution.
Old post, I know, but yet another solution would be to create a wrapper for your content with a minimal height of 100vh - footerHeight
this solution requires that you know the height of the footer...
<body>
<div class="wrapper">
your content
</div>
<div class="footer">
footer content
</div>
</body>
and your css would look like this:
.wrapper {
min-height: calc( 100vh - 2em );
}
.footer {
height: 2em;
}