html:
<div id="main">
<div style="position: absolute; height: 150px; width: 400px; left: 290px;"><img src="HEAD-IMAGE.jpg" /></div>
<div style="position: absolute; height: 300px; width: 233px; top: 180px;"><img src="LEFT-IMAGE.jpg" />(below head)</div>
<div style="position: absolute; top: 200px; left: 270px;">TEXT (next to left image)</div>
</div>
css:
div#main{
position: absolute;
top: 141px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -490px;
text-align: justify;
background-color: yellow;
}
my padding from #main works for my images but not for my text (right & bottom padding).
Why is this happening?
In your example, only the text div has a top and left property. The two divs containing the images only contain one of these properties:
The header div has left: 290px;, so it gets its y-axis position moved by the top padding.
The left div has top: 180px; so it gets its x-axis position moved by the left padding.
The text div has top: 200px; left: 270px; so its x and y-axis are not affected by the padding.
To illustrate this, for this example the text div has had its left property removed. It is now affected by the left padding of its container:
("Show code snippet" and run it)
#main {
position: absolute;
top: 141px;
left: 50%;
height: 100%;
width: 960px;
padding: 50px;
margin-left: -290px;
text-align: justify;
background-color: yellow;
}
.header {
position: absolute;
height: 150px;
width: 400px;
left: 290px;
background: #F00;
}
.left {
position: absolute;
height: 300px;
width: 233px;
top: 180px;
background: #F00;
}
.text {
position: absolute;
top: 200px;
background: #F00;
}
<div id="main">
<div class="header">
<img src="http://www.placehold.it/200" />
</div>
<div class="left">
<img src="http://www.placehold.it/200" />
</div>
<div class="text">You can't handle the truth, soldier!</div>
</div>
Is position: absolute the best way to layout my elements?
Depends... position: absolute removes elements from the normal flow of the document. That is, each element is essentially invisible to the other. This is particularly problematic if you wish to create a flexible layout, which can re-size in accordance with the users browser height / width.
Can you show me another way to layout HTML elements?
Sure! There are many ways to layout a page without resorting to position: absolute. Here is a basic example using display: flex — a newer way to layout elements. It does not enjoy 100% browser support yet, so this is purely an example of one technique :)
Read more:
about vw and vh units on the MDN
about flexbox over on CSS-Tricks - A Complete Guide to Flexbox
about flexbox browser support
Flex example
Note how the elements resize when the example is made full-screen.
* {
margin: 0;
padding: 0;
}
body {
width: 80vw;
max-width: 800px;
margin: 0 auto;
background: #424242;
}
header {
background: #e91e63;
height: 20vh;
}
.wrap {
display: flex;
}
.left {
background: #fce4ec;
flex: 1;
}
.content {
background: #fafafa;
min-height: 70vh;
flex: 2;
}
footer {
height: 10vh;
background: #c51162;
}
<header>
I am header
</header>
<div class="wrap">
<div class="left">
I am sidebar
</div>
<div class="content">
I am content
</div>
</div>
<footer>
I am footer, hear me roar! RWAR!
</footer>
Define a class .child for your <div>
<div class="child">
and define style accordingly
.child { padding: 10px; }
Use position: relative; on the child divs to make them account for the parent divs padding.
problem is you give left and top to text div that why not accept padding,simply remove left to text div then it will accept the padding...
Related
Is it possible to make a div absolute to a specific relative div rather than just the parent?
For example. I have a div that's contained inside of a row. But, I want it to be absolute in the section rather than the row. Both divs are positioned relative because of a WordPress themes styling. If I use position absolute it will just make it absolute to the row.
How can I get around this issue?
.section {
width: 100%;
height: 100%;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
right: 0;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
This is not how positioning works. A div or any other element is relevant to its parent regarding its positioning. In case you want to position an element inside the section that you have, it's better to construct your code as follows:
<div class="section">
<div class="absoluteDiv">
</div>
<div class="row">
</div>
</div>
You could find some more examples here
Hope it helps,
Konstantinos.
Although you can not make a div absolute to a specific div, one way to get the results you are looking for is to add overflow:visible; to the row and left:100%; to content container. I changed the section height to 300px for demonstration purposes but it will behave the same with 100%.
.section {
width: 100%;
height: 300px;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
overflow:visible;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 100%;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
So, I'm trying to build a site that features various different sized images, one at a time, that are centered and size constrained by a parent div, then resized to preserve their ratio.
#grandparent {
display: block;
position: fixed;
width: 70vw;
height: 85vh;
top: 10vh;
left: 15vw;
}
.parent {
position: relative;
display: block;
width: 100%;
height: 70vh;
}
.resizedimage {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
<div id="grandparent">
<div class="parent">
<img src="1.jpg" class="imageprime">
<div class="description">Words<br>more words</div>
</div>
</div>
I want the description below to stick below the bottom left corner of the image, which it currently does when max-width is the one being constrained, but when max-height is being constrained, it moves past the left of the image. I can't figure out how to keep them in line!
All the methods I've seen revolve around moving a container div to 50% then padding back to -50%, or something like that. But as I depend on the image dictating the width and height dynamically, I don't know how to translate that to a container div, or just to the text below!
It is quite simple: you need a container that will be sized by image in it with position: relative and your description should have position: absolute so it will be positioned against container which, in its turn will be sized by image. Something like this:
#grandparent {
display: block;
position: fixed;
width: 70vw;
height: 85vh;
top: 10vh;
left: 15vw;
}
.parent {
position: relative;
display: block;
width: 100%;
height: 70vh;
}
.image-container {
display: block;
margin: 0 auto;
position: relative;
}
.resizedimage {
max-width: 100%;
max-height: 100%;
}
.description {
position: absolute;
left: 5px;
bottom: 5px;
}
<div id="grandparent">
<div class="parent">
<div class="image-container">
<img src="https://dummyimage.com/300x200/347508/000000.png" class="resizedimage">
<div class="description">Words<br>more words</div>
</div>
</div>
</div>
The last two days I've been reading most questions here and a lot more about 'fill remaining width' and 'escaping overflow: hidden', but I can't get my problem solved. At the moment, I seriously doubt if it is possible at all.
I have a scrolling box with full body width. On top of that I have a absolute positioned header that I need to make the exact same width as the scrollbox. My intention is to make the header 0px or (if needed) 1px in height and let the content overflow.
Here is a fiddle.
The scrollbox has a scrollbar (always visible), the header obviously not. To compensate for that, I float a fake scrollbar to the right inside the header container, and left of that a <div> filling the remaining width (being exactly the innerwidth of the scrollbox).
HTML
//THE SCROLLBOX
<div id="scrollbox">
<div id="center2">
content<br>content<br>...
</div>
</div>
// THE HEADER
<div id="header_box">
<!--- FAKE SCROLLBAR -->
<div id="scroller">
<div></div>
</div>
// REMAINING WIDTH
<div id="container">
<div id="FIRST">
<div id="FIRST_banner"></div>
</div>
</div>
<div id="SECOND">
<div id="SECOND_banner"></div>
</div>
</div>
</div>
CSS
#header_box {
background: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
height: 25px;
width: 100%;
overflow: visible;
}
#scroller {
float: right;
overflow-x: hidden;
overflow-y: scroll;
height: 50px;
width: auto;
/* visibility: hidden; */
}
#scroller>div {
width: 0px;
height: 101%;
}
#container {
display: inline;
width: auto;
height: 50px;
overflow: visible;
}
#FIRST {
position: relative;
overflow: hidden;
height: 25px;
background: pink;
}
#FIRST_banner {
position: absolute;
top: 0;
left: 50%;
height: 220px;
width: 30px;
background: crimson;
}
#SECOND {
background: darkcyan;
position: relative;
height: 5px;
}
#SECOND_banner {
position: absolute;
top: 0;
left: 50%;
height: 220px;
width: 30px;
background: blue;
}
The problem lies in the div (#FIRST) with remaining width. From all the solutions I've read only the one with
position: relative;
overflow: hidden;
works for me. It gives the exact width, lining up the center of the header and the scrollbox nicely. But I can't break out of the overflow: hidden, so it cuts off the content.
So my second thought was: wrap #FIRST in a #container and let the child determine the width of the parent. After that, I can put another div (#SECOND) inside the container with the width of the parent. It works partially. The #container has the width intended, and the #SECOND div overflows nicely but takes on the width of #header_box, as no width is set on the parent itself.
So, my questions:
Can I somehow break out of the overflow: hidden of the FIRST div? (In that case the container and second div can be removed).
Is there a way to let the SECOND div obey the width of it's parent.
Some totally different solution.
Sadly there is a catch to this all:
css only
no javascript
no flexbox
Thanks voor any toughts.
In the end, it was the good old <table> that saved the day, much simpler than I tought. There still is a fake scrollbar, but the absolute header now aligns perfect with the contents of the scrollable div behind it, and it remains fluid.
See fiddle here
HTML:
<!--- HEADER -->
<div id="THIRD">
<div id="THIRD_A">
<div id="THIRD_B"></div>
<div id="THIRD_C"></div>
<div id="THIRD_D"></div>
</div>
</div>
<!--- FAKE SCROLLBAR -->
<div id="scroller">
<div></div>
</div>
</div>
CSS:
/* The container for the header */
#header_box{
position: absolute;
left: 0;
top: 0;
right: 0;
height: 0px;
width: 100%;
overflow: visible;
display: table;
}
/* Takes on the width of its child: the fake scrollbar */
#scroller {
display: table-cell;
float: right;
overflow-x: hidden;
overflow-y: scroll;
height: 0px;
width: auto;
}
/* This triggers a scrollbar to be shown */
#scroller>div {
width: 0px;
height: 101%;
}
/* The 'remaining width' container (= screenwidth - scrollbar, equals innerwidth of scrollbox) */
#THIRD{
display: table-cell;
width: 100%;
height: 0px;
}
/* Needed to give the children a 'width' reference */
#THIRD_A{
position: relative;
width: 100%;
height: 0px;
}
/* The actual header items */
#THIRD_B {
position: absolute;
top: 0;
left: 50%;
width: 25px;
height: 220px;
background: black;
}
#THIRD_C {
position: absolute;
top: 0;
left: 10%;
width: 125px;
height: 120px;
background: black;
}
#THIRD_D {
position: absolute;
top: 0;
right: 0%;
width: 25px;
height: 220px;
background: black;
}
NOTE:
On most handheld browser, this is 1px off. It seems webkit based browsers display a tablecell of 0px width as 1px width (see this question). The solution is to wrap the table in another div with css:
position absolute;
left: 0;
right: -1px
and setting #scroller>div to a width of 1px.
NOTE 2:
This is also a solution for a fixed div inside a scrollable div. See this fiddle
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
I'm trying to create something in JQuery Mobile, however I need to be able to position a button from the center. Right now, the button is positioned from the top-left corner, and as such if I resize the window, everything is horribly off-center.
<body>
<button>Button</button>
<div />
</body>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 200px;
left: 200px;
}
Fiddle: http://jsfiddle.net/chpt3x1v/4/
I couldn't get JQM working in JSFiddle (didn't know how without it showing loads of errors), so I just used a regular button, but the same premise applies.
TWO IMAGES:
As you can see, it is completely off-center.
UPDATED ANSWER:
You need to give the button a set width and height, and then set the top margin to negative one half the height, and the left margin to negative half the width:
Updated DEMO
<div class="thediv"></div>
<button data-role="none" class="theButton">Button</button>
.thediv {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
.theButton {
position: fixed; /* or absolute */
top: 200px;
left: 200px;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
}
ORIGINAL ANSWER:
You can use fixed positioning and a negative margin to keep it centered:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div class="centered"><button>Button</button></div>
</div>
</div>
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
background-color: black;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
.centered button {
margin: 0 !important;
height: 100%;
}
Updated FIDDLE
Firstly your code doesn't have an opening tag. Secondly, you need to have the parent element, i.e. the div, positioned as relative.
Third, you've positioned your button to the very edge of the div by using the same dimensions. Try:
<body>
<div>
<button>Button</button>
<div />
</body>
div {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
The z-index property will allow the button to overlay the div.