There's got to be an easier way.
div {
border: 2px solid black;
}
#main {
width: 107px;
height: 107px;
padding: 0;
text-align: center;
font-size: 10px;
}
#tl, #tr, #bl, #br {
position: relative;
width: 45px;
height: 45px;
}
#tl {
top: 3px;
left: 3px;
}
#tr {
top: -46px;
left: 55px;
}
#bl {
left: 3px;
top: -43px;
}
#br {
top: -92px;
left: 55px;
}
<body>
<div id="main">
<div id="tl">Top Left</div>
<div id="tr">Top Right</div>
<div id="bl">Bottom Left</div>
<div id="br">Bottom Right</div>
</div>
</body>
Any suggestions? I'm still trying to learn better styling in order to build nicer GUI's on my web apps.
I just want to place these four divs equally inside of one parent div container. The four divs are "Top Left", "Top Right", "Bottom Left" and "Bottom Right".
you may use display:flex; and flex-wrap:wrap; on main container and margin:auto on childs
div {
border: 2px solid black;
box-sizing:border-box;/* switch box model to integrate padding and borders into size */
}
#main {
width: 107px;
height: 107px;
padding: 2px; /*eventually*/
text-align: center;
font-size: 10px;
display:flex;
flex-wrap:wrap;
/* show me */
background:linear-gradient(to left,rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top,rgba(0,0,0,0.25) 50%, transparent 50%);
}
#tl, #tr, #bl, #br {
width: 45px;
height: 45px;
margin:auto;
}
<body>
<div id="main">
<div id="tl">Top Left</div>
<div id="tr">Top Right</div>
<div id="bl">Bottom Left</div>
<div id="br">Bottom Right</div>
</div>
</body>
Set each container to 50%, and float them side by side...
<div style="width: 500px;">
<div style="width: 50%; float: left; background-color: red;">1</div>
<div style="width: 50%; float: left; background-color: green;">2</div>
<div style="width: 50%; float: left; background-color: orange;">3</div>
<div style="width: 50%; float: left; background-color: pink;">4</div>
</div>
https://jsfiddle.net/908ugcwh/
I would style it like this:
<style>
div {
border: 2px solid black;
}
#main {
width: 107px;
height: 107px;
padding: 0;
text-align: center;
font-size: 10px;
}
#tl, #tr, #bl, #br {
width: 45px;
height: 45px;
margin-top:3px;
margin-left:3px;
float:left;
}
#bl, #br {
margin-bottom:3px;
}
</style>
Give it a try. Cheers.
Related
I have a div#B in the div#A in HTML. div#A has padding in the CSS file and I want to doesn't affect on the div#B; I tried this ↓ but because of percent format they have, it doesn't work (doesn't fit completely to parent div because of the percent)!
div#wrapper {
width: 80%;
margin: 5px auto;
background: blue;
}
#sidebar {
float: left;
width: 19%;
margin-right: 1%;
background: green;
border-radius: 5px;
}
#A {
padding: 0.5% 2%;
width: 76%;
background: red;
float: right;
margin-bottom: 5px;
}
#B {
border-radius: 5px 5px 0 0;
height: 116px;
background: green;
}
<body style="background: aqua;">
<div id="wrapper">
<div id="sidebar">this is sidebar and there is something here i dont know for now :))</div>
<div id="A">
<div id="B">
</div>
</div>
</div>
</body>
it works fine, made few minor updates to your css, have a look at the below-working snippet :)
#A {
padding: 1%;
background: red;
}
#B {
margin: -1%;
background: green;
}
<div id="A">
<div id="B"> </div>
</div>
based on updated requirements, in your project can u update the position and height of the #A, if yes then below snippet will work for you
div#wrapper {
width: 80%;
margin: 5px auto;
background: blue;
}
#A {
padding: 0.5% 2%;
width: 76%;
background: red;
margin-bottom: 5px;
position: relative;
height: 116px;
}
#B {
background: green;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
}
<div id="wrapper">
<div id="A">
<div id="B">
</div>
</div>
</div>
If you add padding on your B, it will be solve your problem.
#B{
padding: 20%;}
Like that example.
#B {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
The idea here is to push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with a negative margin margin-left: -50vw;.
I am trying to create a page, where there is a div in the middle of the page centered horizontally, not vertically, with 3 more divs inside of it which are centered vertically and horizontally with equal spacing. In order to achieve this I thought it would be best to create another div with no background colour, then using margin: auto on it, this div is centered in the main div, but I can't get the 3 other divs to center in that, it's like the margins aren't taking into account the parent element?
I have tried a few methods which say they should center my elements, but they do not work for me, so I thought it would be best if someone can explain to me how this effect can be achieved in CSS.
Here is a screenshot of the current situation (red div will be invisible in final design, coloured to help me): http://i.imgur.com/cHWfVx6.png
HTML Code:
<html>
<head>
<title>Title Placeholder</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div id="title"></div>
<div id="introdiv"></div>
<div id="wrapper">
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
CSS Code:
html {
background: ##6f7604;
background-image: url("zenbg-1.png"), url("zenbg-2.png");
background-repeat: repeat-x, repeat;
}
#title {
background-color: rgba(83,188,255,0.6);
min-height: 5%;
width: 90%;
margin: auto;
border: 1px solid #ddd;
}
#introdiv {
background-color: rgba(255,207,76,0.9);
min-height: 15%;
width: 70%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#wrapper {
background-color: rgba(83,188,255,0.6);
min-height: 65%;
width: 80%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#container {
min-height: 10%;
width: 50%;
background-color: red;
margin: auto;
margin-top: 6.5%;
}
.box {
background-color: rgba(255,207,76,0.9);
min-height: 40%;
width: 20%;
margin-left: 5%;
margin-top: 5%;
border: 1px solid #ddd;
display: inline-block;
}
Thanks for your help, if you need any more info, ask.
You can use absolute position and transform to align element middle and center. Example:
.main {
width: 100%;
height: 256px;
padding: 20px;
background: #000;
}
.center-h {
width: 80%;
height: 200px;
margin: 0 auto;
position: relative;
background: #555;
}
.center-vh {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #999;
padding: 10px;
}
.box {
display: inline-block;
width: 64px;
height: 64px;
margin-right: 10px;
background: #ccc;
float: left;
}
.box:last-child {
margin-right: 0;
}
<div class="main">
<div class="center-h">
<div class="center-vh">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Use vertical-align: middle like this
.box {
background-color: rgba(255,207,76,0.9);
min-height: 40%;
width: 20%;
margin-left: 5%;
vertical-align: middle;
border: 1px solid #ddd;
display: inline-block;
}
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
Hello i have a problem with my images in divs.
jsFiddle
.navbar {
position: fixed;
z-index: 1000;
height: 100%;
width: 60px;
left: 0px;
top: 0px;
background-color: #2e2d2d;
border-right: 1px solid #c6c5c5;
}
#works {
position: relative;
margin-left: 60px;
height: 100%;
}
.left {
position: relative;
width: 50%;
float: left;
}
.right {
position: relative;
height: 100%;
width: 50%;
float: left;
}
#works .up {
width: 100%;
height: 50%;
}
.up h1 {
font-family: ralewayregular;
text-transform: uppercase;
text-decoration: none;
font-size: 10px;
padding: 10px 15px;
}
.up h2 {
font-family: ralewayregular;
font-size: 5pt;
padding: 1px 15px;
}
.down_1 {
float: left;
width: 50%;
height: 50%;
}
.down_2 {
float: left;
width: 50%;
}
<div class="navbar">
<a class="menu-trigger"></a>
</div>
<section id="works">
<div class="all">
<div class="left">
<img src="http://i.telegraph.co.uk/multimedia/archive/02194/Bank2_2194348b.jpg" width="100%">
</div>
<div class="right">
<div class="up">
<h1>bl bla</h1>
<h2>/asdasda <br /> as : VENEZIA
/ SELLEKTOR / SUGARPILLS / NIKKI LISSONI</h2>
<div class="arrow"></div>
</div>
<div class="down_1">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" width="100%" height="100%" />
</div>
<div class="down_2">
<img src="http://cutebabywallpapers.com/wp-content/uploads/2014/09/cute-a-little-baby-and-cat-pictures.jpg" width="100%" />
</div>
</div>
</div>
</section>
Div left must have the same hight like div right. Both should end in one line.
How to do this without giving them hight, to not strech my images? Div up and down should have 50% height but its not working.
Someone can help me solve it?
For them to to be the same height, there most be some measure, strict height or min-height.
For the height to measure, do something like:
.left, .right {
width: 100%; /* Adjust as needed */
min-height 50%; /* best to be the same as what you assume would
be the height of the taller both DIV's so that nothing will be cut off */
}
For your image not to be distorted, do something like:
.right img, .right img, {
width: 100%;
height: auto; /* Set the height to auto to give the
image a breathing space to reduce distortion */
}
Let me preface this by saying I feel like a moron. I have a fairly simple scenario that I can't figure out.
This is a sample of what my code looks like:
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="line"></div>
</div>
</div>
Let's say #container-wrapper is a fixed width such as 960px. #container has its width set to 100%. I don't know the width of .left because the text inside is dynamic. It's floated left. .line has a background image that is essentially a line which will repeat to fill the width of the div. I want to float it next to .left so it looks something like this:
This is LEFT ---------------------------------------------------------
If I set the width of .line to 100% it will trying to fill the entire container width so the question is how do I get it to fluidly adjust to the space that is left over from .left.
Hope I'm being clear.
Thanks,
Howie
Here's a sample of the real code I'm using. .line is really .inside-separator.
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="inside-separator"><span class="inside-separator-left"> </span><span class="inside-separator-right"> </span></div>
</div>
</div>
.inside-separator
{
background: transparent url('../images/inside_separator.png') no-repeat center center;
margin: 0;
padding: 0;
height: 7px;
width: something?;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
I'm not sure this is possible using floats. But if you're ok using display:table instead of floating .left then it's easier.
div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }
<div class="left"><div class="line">11111111111111111</div> This is LEFT</div>
Put the .line inside the .left and float .line right
http://jsfiddle.net/Hk7GR/1/
Thanks for all of your help. The display:table did the trick. Here's a sample http://jsfiddle.net/idpexec/QKSzC/
<div class="container-wrapper">
<div class="container">
<div class="left">This is LEFT</div>
<div class="inside-separator-wrapper">
<div class="inside-separator">
<span class="inside-separator-left"> </span>
<span class="inside-separator-right"> </span>
</div>
</div>
</div>
</div>
<style>
.container-wrapper
{
width: 500px;
height: 60px;
border: 1px solid green;
margin-bottom: 50px;
}
.container
{
display:table;
width:100%;
}
.left,
.inside-separator-wrapper
{
display:table-cell;
}
.left
{
border: 1px solid red;
white-space: nowrap;
padding: 0 15px;
}
.inside-separator-wrapper
{
width: 100%;
position: relative;
}
.inside-separator
{
background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
height: 7px;
position: relative;
top: 0px;
left: 0px;
padding: 0;
width: 100%;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('http://test.2wsx.ws/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
<style>