I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
Related
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
I have two divs (the left one is an image) inside a wrapper that are meant to be next to each other, the div on the right being positioned absolute with right:0 and bottom:0 so it positions to the bottom of the div image on its left. The issue is, when the screen gets small enough the position absolute one overlaps the image. I have added a div that just occupies space in the wrapper and I've avoided the overlap, but now when you make the screen smaller the div goes under the image but it doesn't reposition itself right underneath; it shifts to the right. Here is an example on JSfiddle:
http://jsfiddle.net/xbdsq7zj/
Here is the html:
<div class='ideaside'>
<div class='ideaphoto'>
<img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
</div>
<div style="float:left; width:150px; height: 120px;"> </div>
<div class='ideainfo'>
<p clas='glyphicon glyphicon-star unclickable'></p>
<span>Followers</span></p>
<p><strong>
Phase 1
</strong></p>
<p>By <%= render #idea.user %></p>
<i>2 hours ago </i>
</div>
</div>
<br>
<p class='doc'>
<b>Brief:</b>
t's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
</p>
Here is the css:
.ideaphoto {
float:left;
}
.ideainfo {
position:absolute;
bottom:0;
right:0;
}
.ideaside {
position:relative;
overflow:hidden;
}
I'd like it to go to reposition so that it is directly under the image rather than next to some whitespace under the image. Is that possible without using Jquery collision detection?
Thanks.
Edit: I am using Bootstrap, and this is all taking place in col-md-4. The image is always 200px, but the text div's width is sort of variable depending on the user's name.
I think bootstrap's function, (assuming your using bootstrap for this because of the glyphicon) will be of use to you. You don't have to use float anymore because bootstrap will do it for you.
<div class="row">
<div class="col-md-6 col-sm-12 ideaphoto"> <!--If viewport is regular it will take up half of the page. But if viewport is smaller it will consume a row, thus repositioning the .ideainfo below it.-->
<!--Enter your Image code here.-->
</div>
<div class="col-md-6 col-sm-12 ideainfo">
<!--Enter your IdeaInfo here.-->
</div>
</div>
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
I need to design a webpage where each div element fits the browser window.
Here's what I have right now:
http://jsfiddle.net/E9HER/
What I need to do is to have each of those red-bordered containers to vertically fit the browser window (for heights greater than 500px).
<div class="contentcontainer">
<div class="WhoWeAre"><a name="WhoWeAre">Who we are</a></div>
<div class="WhatWeDo"><a name="WhatWeDo">What we do</a></div>
<div class="OurWork"><a name="OurWork">Our work</a></div>
<div class="Contact"><a name="Contact">Contact</a></div>
</div>
Any suggestions or help would be greatly appreciated.
you can set
.wrapper {min-height:500px;
height:100%;}
.contentcontainer {
height:85%;
min-height:500px}
apply the contentcontainer properties to the containing divs as well...
You will have to play around with the % to come to a proper height.
This will scale the divs to the browser window, but will set it to 500px for windows below that...
<div style="float:left; width:50%;">
div 1
<div style="position:absolute; width:105%">nested element</div>
</div>
<div style="float:left; width:50%;">
div 2
</div
If an element exceeds the width of its floated parent element, the next element is pushed down unless I apply overflow:hidden on both floated elements, which defeats the purpose because I DO NOT want to hide the overflowing content. Is there any fix for it?
You have to make sure the content inside is not wider than the divs to stop the elements being pushed down in this scenario.
You could perhaps put margin-right: -5% on the positioned div to make it's width narrower in the document flow, but it should still display at 105% wide once rendered.
Set it to 100%, not 105% - otherwise, it is simply doing what you told it to do.