I'm hoping there's a way to do this without JavaScript. I have two elements displayed with inline-block. They are both 200 pixels in width and height, so they both appear on the same line unless the browser is sized very small (or with mobile browsers). I want there to be a 50px space between the two elements, so on the second element I added "margin-left: 50px", which works fine. When the browser is resized to a size where both elements cannot fit on the same line, the second element wraps to the next line, which is what I want it to do. The problem is that the second element still has the 50px left margin, so the elements don't appear centered. I could add JavaScript to detect when the container height changes (i.e. the element wrapped to the next line) and remove the left margin, but is there a way to accomplish this without JavaScript?
Here's my code, simplified:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/YRshx/
Based on bastianonm's solution, try this:
<div id="wrapper" style="text-align: center; margin:0 -25px;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
http://jsfiddle.net/YRshx/6/
Here;s a different approach to the problem. It exploits the fact that spaces are discarded if they are at the start or end of a line. So it uses a space to separate the blocks.
Fidlle: http://jsfiddle.net/xKVG3/
<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper {
border:2px solid black;
animation: 4s linear 0s infinite alternate wide;
}
#keyframes wide {
from { width: 490px; }
to { width: 430px; }
}
<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>
You could do something similar to:
#media screen and (max-width: 453px){
#elem2 { margin-left:0 !important; }
}
http://jsfiddle.net/YRshx/3/
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
Working jsFiddle Demo
Try to add margin to both left and right, and to your both elements:
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div>
</div>
However based on your real layout, this trick maybe won't work, or need more things.
Just keep the inline container in a inline div and float them...
Code:-
<div id="wrapper" style="text-align: center;">
<div id="outer" style="display: inline-block;">
<div id="elem1" style="float:left; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="float:left; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</div>
Demo:- http://jsfiddle.net/YRshx/2/
Thanks...
If you have more elements inside one container and wrap them evenly use below code it will work perfect.
I am using UL, LI and minimal css
https://jsfiddle.net/mkpasala/ayw8szcn/
<h1>Wrap children evenly</h1>
<ul class="skillscont-list">
<li>TestSkill</li>
<li>TestSkill1</li>
<li>TestSkill2</li>
<li>Test - Skill</li>
<li>Chat-Skill</li>
<li>testing disposition</li>
<li>Narender</li>
<li>Inya</li>
<li>Chat_Inya</li>
<li>Agent1</li>
<li>agenttwo</li>
<li>mahender</li>
<li>naresh</li>
<li>venkat-skill</li>
<li>English</li>
<li>French</li>
<li>testpoc</li>
<li>mahender1</li>
<li>devskill</li>
<li>praveen</li>
</ul>
.skillscont-list{
margin: 0px;
padding: 0px;
overflow: overlay;
list-style-type:none;
}
.skillscont-list li{
border:1px solid black;
float: left;
widht: auto;
padding: 5px 10px;
margin: 5px;
color:white;
font-weight:bold;
background-color:gray;
}
Related
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 would like to write a CSS script that involves 4 div in addition to a fifth div as a container.
The Div 1 should be at the top as a title, Div 2 should be at the center of the right side of the container ,Div 4(Containing img src) should be at the center of the container , and Div 3 should be at the bottom of the image.
I had a script as a trial but it not like that I want( Iam beginner in CSS) .
<html xmlns="http://www.w3.org/1999/html">
<head>
<title> </title>
<meta charset="utf-8">
<style>
#siena img {
display: inline-block;
margin-left: 0px;
}
#Container
{
margin-bottom: 3pc;
text-align: center;
border-width:2px;
border-color: #46b8da ;
margin-right: 100px;
margin-left: 100px;
border-style: solid;
background-color :#c4e3f3;
padding :10%;
}
#link
{
display: inline-block;
}
#price
{
top:100px;
width:50%
margin:0 auto;
float:right;
}
</style>
</head>
<body>
<meta charset="utf-8">
<h1 style="text-align: center;"> Text </h1>
<div id="Container" > <p>
<div id="siena" >
Text
<img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'>
<div id="price" >
price
</div>
</div>
<div id="link" >
<a href='https://www.google.com/?gws_rd=ssl' > </a>
</div>
</div>
</body>
</html>
Your markup looks invalid.
You have unecessary spaces within tags and unclosed p tags.
You can achieve what you want via this markup:
<div id="container">
<div id="header">Div 1</div>
<div id="content">Div 4</div>
<div id="side-content">Div 2</div>
<div id="footer">Div 3</div>
</div>
And then use CSS to position the elements:
#container {
width: 100%;
}
div {
border: 1pt solid black;
padding: 5px;
text-align: center;
}
#content {
width: 70%;
float: left;
}
http://jsfiddle.net/7dqagh7s/
Also, I would recommend using a StyleSheet rather than putting the code directly inline with the markup.
I tried to copy the image in css
.container{
width: 90%;
border: 1px solid brown;
height: 500px;
}
.top, .bottom{
margin-top: 10px;
width: 90%;
height: 100px;
border: 3px solid red;
margin-bottom: 10px;
}
.left, .right{
display: inline-block;
width: 50%;
border: 3px solid maroon;
height: 200px;
}
.right{
display: inline-block;
width: 40%;
margin-left: 5%;
}
<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom">bottom</div>
</div>
Edit since you asked about the image overlapping another div.
The following will make it so the image will not extend past it's container so the image wont overlap any other div.
.left img{
width: 100%;
max-width: 100%;
max-height: 100%;
}
Is that what you meant?
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle
So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:
But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form.
I want the boxes to be next to each other, with about an inch of separation between them.
I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:
I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.
http://jsfiddle.net/kkobold/qMQL5/
#header {
width: 100%;
background-color: red;
height: 30px;
}
#container {
width: 300px;
background-color: #ffcc33;
margin: auto;
}
#first {
width: 100px;
float: left;
height: 300px;
background-color: blue;
}
#second {
width: 200px;
float: left;
height: 300px;
background-color: green;
}
#clear {
clear: both;
}
<div id="header"></div>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="clear"></div>
</div>
This will work
<div style="width:800px;">
<div style="width:300px; float:left;"></div>
<div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>
<div style="display: inline">
<div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
<div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div>
I am just giving the code for two responsive divs side by side
*{
margin: 0;
padding: 0;
}
#parent {
display: flex;
justify-content: space-around;
}
#left {
border: 1px solid lightgray;
background-color: red;
width: 40%;
}
#right {
border: 1px solid lightgray;
background-color: green;
width: 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="parent">
<div id="left">
lorem ipsum dolor sit emet
</div>
<div id="right">
lorem ipsum dolor sit emet
</div>
</div>
</body>
</html>
This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.
HTML
<div class="container">
<header>
<div class="logo">Logo</div>
<div class="menu">Email/Password</div>
</header>
<div class="first-box">
<p>Video Explaning Site</p>
</div>
<div class="second-box">
<p>Sign up Info</p>
</div>
<footer>
<div>Website Info</div>
</footer>
</div>
CSS
.container {
width:900px;
height: 150px;
}
header {
width:900px;
float:left;
background: pink;
height: 50px;
}
.logo {
float: left;
padding: 15px
}
.menu {
float: right;
padding: 15px
}
.first-box {
width:300px;
float:left;
background: green;
height: 150px;
margin: 50px
}
.first-box p {
color: #ffffff;
padding-left: 80px;
padding-top: 50px;
}
.second-box {
width:300px;
height: 150px;
float:right;
background: blue;
margin: 50px
}
.second-box p {
color: #ffffff;
padding-left: 110px;
padding-top: 50px;
}
footer {
width:900px;
float:left;
background: black;
height: 50px;
color: #ffffff;
}
footer div {
padding: 15px;
}
You can do it in three ways:
Float Method
<div class="float-container">
<div class="float-child">
<div class="green">Float Column 1</div>
</div>
<div class="float-child">
<div class="blue">Float Column 2</div>
</div>
</div>
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
}
Flexbox Method
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
CSS Grid Method
<div class="grid-container">
<div class="grid-child purple">
Grid Column 1
</div>
<div class="grid-child green">
Grid Column 2
</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
Source
Have a look at CSS and HTML in depth you will figure this out. It just floating the boxes left and right and those boxes need to be inside a same div. http://www.w3schools.com/html/html_layout.asp might be a good resource.
Regarding the width of your website, you'll want to consider using a wrapper class to surround your content (this should help to constrain your element widths and prevent them from expanding too far beyond the content):
<style>
.wrapper {
width: 980px;
}
</style>
<body>
<div class="wrapper">
//everything else
</div>
</body>
As far as the content boxes go, I would suggest trying to use
<style>
.boxes {
display: inline-block;
width: 360px;
height: 360px;
}
#leftBox {
float: left;
}
#rightBox {
float: right;
}
</style>
I would spend some time researching the box-object model and all of the "display" properties. They will be forever helpful. Pay particularly close attention to "inline-block", I use it practically every day.
I'm trying to center some text in a div horizontally.
CSS:
#parent {
background-color: #eee;
height: 48px;
text-align: center;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
float: left;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
float: right;
}
HTML:
<div id="parent" style="width:100%">
<div id="colLeft">left left left left</div>
Title
<div id="colRight">right</div>
</div>
<div style="width:100%; text-align:center">
Title - this one is really centered.
</div>
But it the text "Title" appears to get centered taking into account the space that #colLeft consumes, so it's not really centered with respect to the browser width.
Is there a way that I can truly center the text, no matter how much space #colLeft takes up?
It's not really recommended, but you could do something like this JS Fiddle.
#parent {
background-color: #eee;
height: 48px;
text-align: center;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
float: left;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
float: right;
}
.title{
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
}
<div id="parent" style="width:100%">
<div id="colLeft">left left left left</div>
<div class="title">Title</div>
<div id="colRight">right</div>
</div>
<div style="width:100%; text-align:center">Title - this one is really centered.</div>
You make the title position:absolute. Give it a width. left: 50%. margin-left: minus half of the width. It will stay center. But I wouldn't really recommend doing this...
if you surround Title with a div like this:
<div style="position: absolute;left: 50%">Title</div>
You're good in Webkit.
<div align="left" style="border:5px solid white; text-align:center; position:relative">
<div align="left" style="border:4px solid brown; float:left; width:100px; position:absolute"><span>left</span></div>
<div align="left" style="border:4px solid brown; right:0; width:200px; position:absolute"><span>right</span></div>
<span>really centered</span></div>