I have this sample:
link
CODE HTML:
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc">
details
</div>
</div>
CODE CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
}
img{
width:612px;
height:412px;
border:10px solid white
}
I put an image to better understand what they want to do
basically I want the image to be over container and divul "desc" to be by end.
You can help me solve this problem? What is the best way to do this?
Thank you in advance!
Try this here code it may be solve your problem
*{margin:0;padding:0;}
.container{margin:100px 0;height:200px;border:5px solid red;position:relative;}
.image-container{height:300px;width:30%;border:5px solid blue;position:absolute;right:55%;top:-30%;}
.image-container img{height:300px;width:100%;}
.desc-container{height:190px;width:50%;border:5px solid green;float:right;}
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc-container">
details
</div>
</div>
Check the following code for your answer. Also you can verify the codepen https://codepen.io/sasikumarhx/pen/VKmQod
HTML:
<div class="container">
<div class="left">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
</div>
<div class="right">
<div class="desc">
details
</div>
</div>
</div>
CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border:5px solid #db5207;
height:250px;
}
.right{
float:right;
width:49%;
}
.left{
float:left;
width:49%;
}
.image-container{
}
.desc{
background:red;
}
img{
width:50%;
height:130%;
border:10px solid white;
float:right;
}
please check below code:
just need to change in css:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
margin-top: 50px;
height: 380px
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
min-height: 380px;
display: inline-block;
}
img{
width:612px;
height:412px;
border:10px solid white;
position: relative;
top:-20px;
}
Please check the following if it satisfies your requirement:
<!DOCTYPE html>
<html>
<head>
<title>Solution</title>
<style type="text/css">
#container {
background-color: #DCDCDC;
position: relative;
left: 100px;
top: 100px;
width: 800px;
height: 200px;
padding: 5px;
}
#image {
background-color: #F0E68C;
width: 200px;
height: 255px;
position: relative;
left: 150px;
top: -80px;
}
#details {
background-color: #FF7F50;
position: relative;
width: 400px;
left: 380px;
top: -310px;
height: 190px;
}
h2 {
margin-top: 5px;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="container">
<h2>container</h2>
<div id="image">
<h2>image</h2>
</div>
<div id="details">
<h2>details</h2>
</div>
</div>
</body>
</html>
Related
The div inside another div won't go to the right but just stays to the left. The code below is some what look like chat box the first div with green background has a position of 0px left and it works but the second div has 0px right and it still stick to the left please help me with this it bothers me for 2 day without right solution
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
position: relative means the div is positioned "relative to itself". So right: 0px just means "move the div 0px to the right of where it would normally be"... not to the right edge of the container.
You could use position: relative on the container, and apply position: absolute to the children instead, but assigning top values will be cumbersome.
Info about position
An alternative might be adding display: flex to the wrapper. Then you can use margin-left: auto to push a div to the right.
.wrapper {
background: lightgrey;
display: flex;
flex-direction: column;
}
div > div {
width: 200px;
height: 100px;
margin-bottom: 10px;
}
.left {
background: green;
}
.right {
background: red;
margin-left: auto;
}
<div class="wrapper">
<div class="left">
<p>1</p>
</div>
<div class="right">
<p>2</p>
</div>
</div>
.parent{
width:100%;
position: relative;
clear: both;
}
.incoming {
float: left;
max-width: 80%;
background-color: #ccc;
padding: 4px;
overflow: auto;
}
.reply {
float: right;
max-width: 80%;
background-color: powderblue;
padding: 4px;
}
<div class="parent">
<div class="incoming"><p>Incoming chat that takes up a maximum of 80%
of screen width.</p></div>
<div class="reply"><p>Reply, that also does the same, but from the right of the screen.</p></div>
</div>
Edited to reflect updated requirement
Using relative element with top, left, bottom and right properties is useless. you have to change it to absolute value.
<div style="width:100% height:100%; position: relative; background-color:white;">
<div style="width:200px; height:100px; position: absolute; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: absolute; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE
here is another way to position elements
<div style="width:100%; height:100px; background-color:white;">
<div style="width:200px; height:100px; float:left; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE#2
here is markup for your chat
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.chat {
width: 100%;
background: lightblue;
padding: 10px;
overflow: hidden;
}
.message {
clear: both;
font-family: sans-serif;
color: white;
}
.to, .from {
width: 40%;
padding: 10px;
overflow: hidden;
}
.to {
background: pink;
float: left;
}
.from {
background: lightgreen;
float: right;
}
<div class="chat">
<div class="message">
<div class="to">hi</div>
</div>
<div class="message">
<div class="to">how are u?</div>
</div>
<div class="message">
<div class="from">fine, thnks</div>
</div>
<div class="message">
<div class="to">can u help me?</div>
</div>
<div class="message">
<div class="from">sure, no problem</div>
</div>
</div>
Use float: right; instead of right:0px;.
Here is the code.
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
I am creating a html layout with a sidebar. But my header and content are appearing underneath my sidebar instead of next to it.
.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
position:relative;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
Thanks
Add "display: inline-block;" to the elements that you want to display next to each other.
Just add
#sidebar {
float:left;
}
.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
position:relative;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
float:left;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
I have introduced .inner-container and defined two flexboxes. CSS is simplified.
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.inner-container {
display: flex;
flex-flow: column;
width: 80%;
}
#sidebar {
width: 20%;
background: gray;
}
#header {
border: 1px solid black;
height: 300px;
padding: 10px;
}
#content {
border: 1px solid black;
padding: 10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div class="inner-container">
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
</div>
you should just try editing the
position: fixed
this will solve your problem.
You should try to change your position: relative; to position: absolute;. You can then adjust the position of your divs using a margin.
.container {
position:relative;
padding:10px;
top:0px;
right: 0;
left: 0;
height: 1200px;
}
#sidebar {
position:absolute;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
margin-top:-10px;
}
#content {
border:1px solid #000;
height:700px;
margin-left: 200px;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
Working fiddle: https://jsfiddle.net/khs8j3gu/2/
Good luck!
i want to make a div in the center of the page and that div contains a button which should be in the center of that div.
Like a div should be in the middle of a html page and then that div should contain a button which is also in the middle of that div.
Check this, hope it would help
.main{
height:400px;
background-color:#000;
width:100%;
position:relative;
}
.child{
height:100px;
position:absolute;
background-color:#fff;
width:100px;
}
.button{
height:25px;
position:absolute;
background-color:red;
width:25px;
}
.center{
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div class="main">
<div class="child center">
<div class="button center"></div>
</div>
</div>
Try using following code
HTML
<div class="parent">
<button class="button">Button</button>
</div>
CSS
body {
position:relative;
}
.parent {
position:absolute;
width:200px;
height:200px;
background:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.button {
padding: 10px 20px;
background-color: grey;
color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Here is the simple and less code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style>
#buttonWithDiv {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-bottom-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
}
button {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="buttonWithDiv">
<button type="submit">Click here to Start Test</button>
</div>
</body>
</html>
Using flexboxes
.main {
height: 400px;
background-color: black;
width: 100%;
}
.child {
height: 100px;
width: 100px;
background-color: red;
}
.main,
.child {
display: flex;
justify-content: center;
align-items: center;
}
<div class="main">
<div class="child">
<button>Button</button>
</div>
</div>
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
I have a container div that is not aligning properly, nor can I keep divs inside a container div aligned right or left. It keeps on coming out of the main div or container.
Here's my simple homepage design but the divs are not indenting properly according to this layout:
#container{
background-color:white;
width:100%;
height:1200px;
}
#logo{
background-color:yellow;
width:30%;
height:100px;
float:left;
}
#header{
background-color:green;
width:100%;
height:100px;
float:left;
}
#navigation{
width:100%;
height:40px;
background-color:white;
float:left;
}
#webname{
background-color:gray;
width:70%;
height:100px;
float:right;
}
#mainclass{
width:100%;
height:950px;
float:left;
}
#asideright{
background-color:red;
width:10%;
height:950px;
float:right;
}
#asideleft{
background-color:purple;
width:20%;
height:950px;
float:left;
}
#selection{
background-color:yellow;
width:70%;
height:950px;
float:center;
}
#footer{
background-color:green;
width:100%;
height:100px;
float:;left;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="webname">
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
this is your correct css
#container {
background-color: white;
width: 100%;
height: 1200px;
}
#logo {
background-color: yellow;
width: 30%;
height: 100px;
float: left;
}
#header {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
#navigation {
width: 100%;
height: 40px;
background-color: white;
float: left;
}
#webname {
background-color: gray;
width: 70%;
height: 100px;
float: right;
}
#mainclass {
width: 100%;
height: 950px;
/*float: left;*/
}
#asideright {
background-color: red;
width: 10%;
height: 950px;
float: right;
}
#asideleft {
background-color: purple;
width: 20%;
height: 950px;
float: left;
}
#selection {
background-color: yellow;
width: 70%;
height: 950px;
float: left;
}
#footer {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
There is no such property as float: center; you have to change that property for #selection to float: left;.
Please refer to this tutorial.
You can use this approach .
*
{
margin: 0;
padding: 0;
}
.container {
width: 1170px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color:red;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.inner_div
{
width: 25%;
float:left;
background-color:green;
}
.big_div
{
width: 75%;
float:left;
background-color:yellow;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="inner_div" style="background-color:purple;">
i'm the inner container
</div>
<div class="inner_div" style="background-color:pink;">
i'm another one
</div>
<div class="inner_div" style="background-color:green;">
another one
</div>
<div class="inner_div" style="background-color:orange;">
woho! another one
</div>
<div class="big_div">
yipee! i'm another container
</div>
<div class="inner_div" style="background-color:red;">
yehaa! i'm another container
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>