I have 4 divs containing images, absolute positioned totalling 100% width.
This is due to the user wanting to use the full width of the page in all browsers.
I need to position a div underneath it, also with 100% width, which expands/contracts at the same rate with the browser.
I understand floating isn't an option.
Desired layout:
[img1][img2][img3][img4]
[ content ]
-------100% width-------
HTML
<div id="container">
<div id="image1"><img src="images/1.jpg"></div>
<div id="image2"><img src="images/2.jpg"></div>
<div id="image3"><img src="images/3.jpg"></div>
<div id="image4"><img src="images/4.jpg"></div>
</div>
<div id="content">
</div>
CSS:
#container{
width: 100%;
position: relative;
height: auto;
}
#image1 {
width: 25%;
position: absolute;
right: 50%;
}
#image2 {
width: 25%;
position: absolute;
right: 75%;
#image3 {
width: 25%;
position: absolute;
left: 50%;
}
#image4 {
width: 25%;
position: absolute;
left: 75%;
}
#content {
width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
Used to this method
Live Demo ---------------------------- Demo-two
Css
#pic-container{
font-size:0;
}
#pic-container img{
width:25%;
vertical-align:top;
}
HTML
<div class="container">
<div id="pic-container">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
</div>
</div>
<div class="container">
herer is the your content
</div>
Live Demo
If I am not wrong look at your CSS code:
you forget to put closing "}" of your #image2 .
it must look like this now.
#image2 {
width: 25%;
position: absolute;
right: 75%;
}
hope it helps.
Related
Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>
For some reason I'm getting stuck on this fairly simple problem. I want a scrollable "website" (just a looong jpg screenshot) framed through an iPad as part of my portfolio. The goal is to show the experience of visiting the site in its entirety without taking up a huge amount of space on the page.
For some reason, I haven't been able to get the overflow working right. This doesn't seem like a hard problem on the surface, but it's got me stumped. Any nudge in the right direction is appreciated.
.nest {
position: relative;
height: 712px;
overflow-y: scroll;
}
.ipad {
position: absolute;
top:0px;
right:0;
bottom:auto;
left:0;
}
.container{
height: 940px;
width: 712px;
position: absolute;
top:45px;
background: red;
}
.content {
width: 712px;
overflow: auto;
}
<div class="nest">
<div class="container">
<img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
</div>
<img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
</div>
Your main problem is that your .ipad is top of the .content and mouse scroll is doing its job on the .ipad image but you want to scroll the screentshot image!
<style>
.nest {
position: relative;
height: 712px;
}
.ipad {
position: absolute;
top: 0;
left: 0;
}
.container {
height: 875px;
width: 660px;
left: 26px;
position: absolute;
top: 73px;
}
.container > div {
max-height: 100%;
overflow-y: scroll;
position: absolute;
}
.content {
width: 100%;
}
</style>
<div class="nest">
<img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
<div class="container">
<div>
<img class="content"
src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
</div>
</div>
</div>
Here I changed the order in HTML to fix the z-axis problem, you may also want to use z-index: number in your CSS to fix this too.
Remove overflow-y: scroll; from .nest class, and add it to .container class.
.nest {
position: relative;
height: 712px;
}
.ipad {
position: absolute;
top: 0px;
right: 0;
bottom: auto;
left: 0;
}
.container {
height: 940px;
width: 712px;
position: absolute;
top: 45px;
background: red;
overflow-y: scroll;
}
.content {
width: 712px;
overflow: auto;
}
<div class="nest">
<div class="container">
<img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
</div>
<img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
</div>
<div class="container-full-bg" style="background-image:url('background.jpg');">
<div class="container special">
<div class="jumbotron">
<div class="row push-to-bottom">
<div class="col-md-6">
</div>
<div class="col-md-6">
<p style="color:#fff;"><span style="color:red;font-size:100px;"> 1</span>/10</p>
</div>
</div>
</div>
</div>
<img src="xxx"/>
So I have the above code and it works, but the only thing is that i'd like to position the row/col-md-6's at the bottom of the container. I tried applying position:absolute; and bottom:0; to the row, but that'll just position it to the bottom of the page and put "1/10" left. I'd like it to stay inside the container, and I can't find the fix!
What am I missing?
Edit: I also tried giving the parent div an absolute position and then apply absolute en bottom:0; to the row, but that still won't work
You should give position: relative to the .container or the .jumbotron element. This way you can set position: absolute; and bottom: 0; to the .push-to-bottom div.
EDIT:
Based on your comment you could do it like this:
html,
body {
height: 100%;
width: 100%;
}
.jumbotron {
background-color: inherit;
}
.container-full-bg {
width: 100%;
height: 40%;
max-width: 100%;
background-position: center;
background-size: cover;
}
.container-full-bg .container,
.container-full-bg .container .jumbotron {
height: 100%;
width: 100%;
}
.jumbotron {
position: relative
}
.jumbotron p {
font-size: 60px;
font-weight: 500;
}
.push-to-bottom {
position: absolute;
width: 100%;
height: 100%;
}
Here's a JSFiddle: http://jsfiddle.net/thepio/Lnacr8kn/
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
I am having trouble generating a HTML/CSS layout. The best way to think of it is to take a normal horizontally centered page layout. Only I want one div to extend beyond the centered layout to the right edge of the browser window.
This should work fluently with browser window resizing.
Here are two CSS-only methods to achieve layouts like this. Both have been briefly tested in IE 7/8/9 and Chrome.
Example 1
Here's an example where you know the heights of all your elements.
Demo: http://jsfiddle.net/3RDuy/2/
HTML
<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>
CSS
DIV { position: absolute; height: 100px; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; }
#left{ width: 100px; left: 50%; top: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; top: 200px; margin-left: -200px; background-color: #aaa; }
Example 2
Here's an example where you only know the height of the top and bottom.
Demo: http://jsfiddle.net/3RDuy/3/
HTML
<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>
CSS
DIV { position: absolute; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; height: 100px; }
#left{ width: 100px; left: 50%; top: 100px; bottom: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; top: 100px; bottom: 100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; bottom: 0; margin-left: -200px; background-color: #aaa; height: 100px; }
If you want variable heights on everything (including the ability to have a height greater than 100%) you will probably need to use JavaScript.
This was a very interesting challenge.
I needed a similar effect several months ago with an element extending out of the container to the window's edge, but did not need that space available for content - it was merely a design effect.
Tim's answer is solid, but needing to know the height of an element is not practical. My solution eliminates this requirement.
Making use of a wrapper, some padding and negative margins, we can manipulate our layout to replicate the desired functionality.
Markup:
<div class="header">
<h1>Hello World!</h1>
</div>
<div class="content">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet.</p>
</div>
CSS:
.header,
.footer {
clear: both;
margin: auto;
width: 600px; /* Your container width */
background: grey;
}
.content {
float: right;
width: 50%;
padding-left: 300px; /* Half of your container width */
}
.a {
float: left;
margin-left: -300px; /* Half of your container width */
width: 200px;
height: 10em; /* Not required, set for visual */
background: red;
}
.b {
margin-left: -100px; /* The difference between half your container width and element A */
height: 10em; /* Not required, set for visual */
background: yellow;
}
Demo: http://jsfiddle.net/rkW9J/
It should be noted that this hasn't been tested extensively cross-browser, but doesn't implement any obvious layout quirks so we should be good.
Can't find a solution width pure CSS, but here's how to do it with javascript / jquery.
Demo
HTML:
<div id="wrapper">
<div id="header"> 1080px </div>
<div id="left"> 400px </div>
<div id="right"> full width </div>
<div id="footer"> 1080px </div>
</div>
CSS:
#wrapper { width:1080px; margin:0 auto; }
#header, #footer { clear:both; }
#left { float:left; width:400px; margin-right:10px; }
jQuery:
var right = $('#right'),
left = $('#left');
$(window).on('resize',positionRightDiv);
function positionRightDiv(){
var posLeft = left.offset().left + left.outerWidth(true),
posTop = left.offset().top;
right.css({'position':'absolute','left':posLeft,'top':posTop,'right':0});
}
positionRightDiv();
Note: for this method to work, #wrapper must not have position:relative; nor overlow:hidden;
P.S. Nice atom heart mother profile pic ;-)