In the code below, I want to center logo.jpg across the entire page, and right align shopping_cart.jpg in the same line. The problem with the current set up is that the image on the right causes the the image in the center to shift slightly to the left.
I'm using Skeleton CSS Boilerplate, and I don't want to put these 2 images in different divs because then in order to be responsive in mobile view, the center-aligned image will appear on top, and the right-aligned image will appear below it (I want them to continue to appear in one line in mobile view).
<div class="container" style="text-align:center">
<div class="row">
<div class="column">
<img width="50%" src="images/logo.jpg">
<img width="5%" src="images/shopping_cart.jpg" style="float:right">
</div>
</div>
</div>
So, is there some way to center logo.jpg across the entire page, and right align shopping_cart.jpg in the same line, such that logo.jpg doesn't shift slightly to the left because of the presence of shopping_cart.jpg?
instead of float right, try
position: absolute; and right: 0;
and on .column :
position: relative;
i think this will do the trick. Copy and paste :)
CSS:
.column {
position: relative;
overflow: hidden;
}
.column img:nth-of-type(1) {
position: absolute;
top:0;
left: 50%;
}
.column img:nth-of-type(2) {
position: absolute;
top:0;
right: 0;
}
Related
I've been asked to change my CSS for adding text to the top right of the screen on my website to use margins and padding instead of what I currently have. The CSS I currently have for doing so is thus:
<style>
.text-align-top-right{
position: absolute;
top: 10px;
right: 10px;
}
</style>
<div class="text-align-top-right">Some text to align top right</div>
How do I do the same thing above using margins and padding?
Thanks in advance.
This is a rather bizarre request and certainly not the way I would recommend positioning an element however if this is some kind of test one way to do this is with css calculations.
Determine the width of the screen and then adjust the offset by the size of the div being positioned.
You will need to know the width and height of the element being positioned in this scenario.
.text-align-top-right{
margin-left:calc(100% - 110px);
margin-bottom:calc(100% - 110px);
height:100px;
width:100px;
background:#b00;
}
<div class="text-align-top-right">TOP RIGHT</div>
You have used <div style="text-align-top-right">Some text to align top right</div> which is not correct. You should replace class attribute in place of style attribute and then you change margins and paddings accordingly to get the required result.
Changes made in HTML
<div class="text-align-top-right">Some text to align top right</div>
Changes made in CSS:
.text-align-top-right{
position: absolute;
top: 0;
right: 0;
margin-top: 30px;
margin-right: 30px;
}
And here is the working fiddle: https://jsfiddle.net/MasoomS/19Ly9f9t/
you can do it very simple way with below CSS, you create simple DIV and add CSS to it. Check below code :
#topRightDisplay{
position: relative;
}
#topRightDisplay p{
position: absolute;
top: 0px;
right: 0px;
}
<div id="topRightDisplay">
<p>some text...</p>
</div>
I'm trying to make a navbar that has a fixed position and has elements inside of it that are also fixed:
.navbar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
}
.content-area {
overflow: scroll;
}
.top-area {
height: 100px;
position: fixed;
top: 0;
}
I have two areas that should be fixed to the top and the bottom and a content area in the middle that's overflow scrolls under the bottom area. When I add position: fixed; to .top-area or .bottom-area they disappear to the top. Why can't I fix an element onto the navbar?
The html looks like this:
<div class="navbar">
<div class="top-area">
</div>
<div class="content-area">
<p> Content here </p>
</div>
<div class="bottom-area">
</div>
</div>
Fixed Elements are taken out of the normal flow of html page. Try to set the z-index value to these classes. Give higher e.g. z-index: 100 to those which you want to be on the top.
If you could show your html, I could fix it more precisely for you :).
I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box - the popped out div with lightbox effect
address_box - the div inside the box which is nothing but an outline image
address - i want this div to be imposed upon the address_box image
HTML:
<div class="box">
<div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
<div id="address_box"><img src="img/address-box.png" />
<div id="address">The address text
</div>
</div>
CSS:
.box
{
position:absolute;
top:20%;
left:12%;
text-align:center;
width:940px;
height:321px;
background:#F9E5B9;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}
.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}
#address_box{
position:relative;
}
#address{
position:absolute;
}
the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.
What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??
Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..
Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div
HTML
<div class="container">
<img src="#" />
<div class="text"></div>
</div>
CSS
.container {
position: relative;
/*Set Height Width Accordingly*/
}
.text {
position: absolute;
bottom: 0;
height: /*Whatever*/;
width: 100%;
}
Demo (Not related to my answer but I fixed what he was asking for)
Let's say I have a DIV that's styled as a square, and it has squares (DIV) inside of it. I'd like the squares inside the main DIV to stack in the lower right. I can use float: right to to get them on the right edge, but how do I make them stack at the bottom rather than the top?
Should you not find a good CSS solution, jQuery can easily handle this:
Fiddle
$('.inner').each(function(i) {
$this = $(this);
var bottomPos = ($this.outerHeight())*i;
$this.css('bottom', bottomPos);
});
HTML and CSS
<style type="text/css">
#outer {
width: 400px;
height: 600px;
background-color: #eee;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #aaa;
position: absolute;
right: 0;
}
</style>
<div id="outer">
<div class="inner">One</div>
<div class="inner">Two</div>
<div class="inner">Three</div>
<div class="inner">Four</div>
</div>
To get a child to stick to the very bottom of a container, set the position:relative and bottom:0px. However this will not stack them, you'd have to set the bottom to another value for a child to be above another child. You could use javascript or jquery to dynamically fit them if the sizes are variable like this:
$('#second_element').css('bottom', $('#bottom_element').height() + 5);
Note: 5 is just for padding
You can use display:table-cell with vertical-align:bottom
Here's a good tutorial on using "table-cell" layout:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
Depending on what you mean by "stack at the bottom", you can achieve this with the use of an inner container div that is aligned at the bottom. Then these child squares can be float right inside of this container div, causing them to stick to the bottom of the main div, like so:
<div id="main_div" style="position: relative; height: 500px; width: 500px;">
<div id="container_div" style="position: absolute; bottom: 0; right: 0;">
<div class="right_floated_square">Square 1 Content</div>
<div class="right_floated_square">Square 2 Content</div>
<div class="right_floated_square">Square 3 Content</div>
</div>
</div>
What this would do is flow these squares right to left at the bottom of the main div. However, these child squares would still flow top to bottom inside the container div. If you wanted them to vertically flow in reverse (bottom up), I'm not sure if that would be possible without some complex layout javascript.
Obviously, the exact styling of "right_floated_square" has been removed for brevity.
Here is a pure css version: http://jsfiddle.net/zkhWA/1/
Basically place your little squares in another absolutely positioned element that is grounded to the bottom right corner of the big square using:
position: absolute;
right: 0px;
bottom: 0px;
Then make all the little squares float right:
float: right;
Don't forget to apply position:relative to the big square.
I want to position "Game on Sep 27" in the lower left-hand corner, across from "Lost 100 chips." But I can't see to get it positioned in the lower left-hand side.
Here's my current CSS:
Any suggestions? Much appreciated!
The easiest way would be to put all three divs (.recentEventsDetail, .recentEventsLowerLeftElement, .recentEventsLowerRightElement) inside a wrapping div with position: relative;. Then you can make lower divs position: absolute; and set placement that way. for example:
<style type="text/css">
.reventEventsWrapper {position: relative;}
.recentEventsLowerLeftElement {position: absolute; bottom: 0px; left: 0px;}
.recentEventsLowerRightElement {position: absolute; bottom: 0px; right: 0px;}
</style>
<div class="reventEventsWrapper">
<div class="recentEventsDetail"></div>
<div class="recentEventsLowerLeftElement"></div>
<div class="recentEventsLowerRightElement"></div>
</div>
Using position relative on the wrapper makes the absolutely positioned children use the origin of that div to calculate position. The only issue here is that you could potentially have overlap. Also youll probably want to add padding-bottom to your wrapper equal to the the height of the left and right divs. this makes sure they never overlap the detail div.
What css do you currently have for .recentEventsLowerLeftElement and .recentEventsLowerRightElement?
To make sure that they are cleared to the next line, I would do something like the following:
<div class="recentEventsLowerElement">
<div class="recentEventsLowerLeftElement">
</div>
<div class="recentEventsLowerRightElement">
</div>
</div><!-- end .recentEventsLowerElement -->
.recentEventsLowerElement { clear: both; }
.recentEventsLowerElement
.recentEventsLowerLeftElement {
float: left; }
.recentEventsLowerELement
.recentEventsLowerRightElement {
float: right; }