I'm creating a small view on my page where I have a centered 500x650 div with some text in it.
I have a bootstrap div as a container, <div class="container">. Inside that I have my centered 500x650 div, with a CSS like this:
.desc {
position: relative;
margin: 30px 245px 0px;
height: 500px;
width: 650px;
background: #fff;
border: 1px dashed #cbd0d8;
padding: 5px;
}
This looks good. Now, I'm trying to add a small image which is supposed to be right by the left bottom corner of the dashed border. Problem is, I centered it with margin: auto, creating a huge horizontal margin on the sides of the .desc-div, so I can't position my img, which is in a div with position: relative, as the margin pushes it down under the corner.
I could use position: absolute on my image but I'm trying to avoid that as I understand it looks different on different sized monitors, and I want this image to sit pretty exactly in one spot.
How do I solve this?
To place your image exactly into the lower left corner of your .desc DIV, put your image tag inside the .desc DIV and give it the following settings:
img.yourclass {
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 30px;
}
Since your DIV already has position: relative, it will act as the position anchor for the absolutely positioned image, and the bottom and left settings place it in the lower left corner.
The width and height of course depend on the image itself . adjust that as needed.
Related
I am trying to build a layout where I have two divs in the background that span 100% of the page and then a full height wrapper div of a smaller size for content that sits centered on the page. The issue I am having is while I can get the wrapper to sit correctly on top of the top div; I cannot get it to behave correctly on the bottom div. Here is an example:
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.index-banner {
background: #265f7a;
height: 60%;
width: 100%;
}
.wrapper {
background: #444;
height: 200%;
margin: 0 auto;
position: relative;
top: -60%;
left: 0;
right: 0;
width: 50%;
}
.footer-bg {
background: #888;
height: 250px;
position: relative;
top: -85%;
left: 0;
right: 0;
width: 100%;
z-index: -1;
}
<body>
<div class="index-banner"></div>
<div class="wrapper"></div>
<div class="footer-bg"></div>
</body>
Now the issue with the above code is by using a negative positioning, then I leave a massive gap at the bottom of the page. However I have also tried:
Using an absolute positioning on the wrapper div. Works perfect in keeping the page the correct size however then the bottom div floats to the bottom of the viewport
Using a faux method of making the bottom div look like a full width div by using a background image on body; unfortunately this just sticks it to the bottom of the viewport instead of the bottom of the page due to no content being between both background divs.
Now I have thought about keeping the wrapper occurring naturally between both of the background divs so they do not overlap at all and then put divs inside of those background divs lined up with the wrapper however that becomes a bit of a nightmare that I want to avoid because then I have to struggle to try and align the content that overlaps them as each of those "section divs" would have to be split into two (imagine trying to make a paragraph look like one because it is spread between two divs).
So my question is - am I going about this the wrong way and overlooking something that I could be doing differently to make this work?
I need both divs to have dynamic width.
The gray one has to be centered, while the blue one to float right BUT both be horizontally alingned.
These to are sitting in a wrapper.
The problem is that in order to have varying width I use display:block and this makes the gray div to push the other one down.
How can I manage this without setting a fixed width for the gray div?
EDIT
This is how it should look like. I just put another left floating div.
The red div has to be perfectly centered.
All divs' width must be dynamic.
You can nest the blue div within the grey one and absolutely position it, using left:100% will make it horizontally dock to the right side of the grey div.
Just one of many options.
Here is a demo: http://jsfiddle.net/HnsEx/
Here's a fiddle :)
fiddle
and css
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
I have a main div (width: 960px) which is centered in the browser window with "margin: 0px auto". From time to time I would like to show an ad (160x600, margin left side maybe 10px) attached to the right side of the main div but the main div should always remain in the center of the browser.
How can I do that?
You can place the ad inside the centred div, make the centred div position:relative, the ad position: absolute and set left as appropriate: http://jsfiddle.net/3vqh8/1/
#center {
background: blue;
width: 960px;
height: 600px;
margin: 0 auto;
position: relative;
}
#ad {
position: absolute;
height: 600px;
width: 160px;
background: red;
right: -170px;
}
Try positioning the main div as relative and the ad div as absolute.
Play with top and left to adjust the placement.
(Not sure it will work, make a jsfiddle to show us your case)
If your main container is already centered, just lay your new divider like first inner element of your main-container, then position it absolute with a 'move-it-to-left' position.
<div class="main-container">
<div class="new-left-publicity"></div>
<div class="what-was-there-before"></div>
</div>
I have a CSS background image that will stay centered no matter what the browser size is. The image used does not stretch the entire width of the browser. This being the case, I need the divs I have also placed in the CSS with background images and links to maintain their position relative to the background image that stays centered no matter what the browser size is.
I have dabbled around with.
position:relative;
but it cascades all the elements and doesn't allow specific positioning that I am looking for. Here is the code I am working with. I appreciate any insight to my newb question, and look forward to learning how this behaves better.
When this code is viewed on different sized browsers, with a background image that does not span the entire width, the elements move around because they are set to percentage. I need them to stay where they are but remain centered with the background. I am not sure how to write this in CSS and have been struggling with it for some time. Thankyou for any guidance on this specific issue.
body {
background:#000 url(bg.jpg) no-repeat center 0;
}
#logo {
margin: 0px 11%;
padding: 0;
position:absolute;
}
try grouping elements you want to put next to it together inside a div ~say container~ and set the background to the div.
Then set the div ~container~ position to relative and center it.
Then align other elements using position absolute and top bottom left right property wrt the ~container~div.
here is the code for it
<div id="container">
<div id="element1"></div>
<div id="element1"></div>
</div>
<style type="text/css">
#container {
background:#000 url(bg.jpg) no-repeat center 0;
width: 800px; height: 400px
position: relative;
top: 50%; left: 50%;
margin-top: -200px; margin-left: -400px }
#element1 {
position: absolute;
top: -30px; left: -20px;}
#element2 {
position: absolute;
top: 410px; left: 820px;}
</style>
a. image (960x7)
b. div (width:960, padding:10)
I want to position (a) so that it's 50px from the top, centered.
I want to position (b) so that it's directly beneath (a) with no space.
My CSS follows:
#charset "utf-8";
* {margin:0;padding:0;}
body {background-color:#999;}
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}
My HTML follows:
<body>
<div class="pagetop" />
<div class="page">
<p>Warning sign, warning sign...I see it but I...pay it no mind.</p>
</div>
I'm trying to create a white container with rounded edges on a grey background. How can I do this simply and intelligently?
Check out this question for the rounded edges:
CSS Rounded corners
And for the positioning of the objects, I would go with something like this:
topimage {
position: absolute;
top: 50px;
text-algin: center;
}
To put the elements without a margin between them, you want the top image to have a zero bottom margin:
margin: 50px auto 0;
(Notice that you have to specify a unit (for example px) for any non-zero measurement.)
The background image will not give the top element it's size, you have to specify the width and height to match the size of the image. If the height is less than a regular character, you need to use something to keep Internet Explorer from expanding the element to the height of one character line, for example by using overflow: hidden; to keep the content from affecting the size of the element:
width: 960px; height: 10px; overflow: hidden;
The padding is added to the size of the element, so you have to make the page element 20 pixels narrower:
padding: 10px; width: 940px;
If your rounded corner image is 30px high, set .pagetop height to 30px, add 50px of padding to the top and set the top of the background image to 50px.
.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}