.products
{
width: 100%;
height: 500px;
background: gray;
}
.box
{
width: 250px;
height: 300px;
background: darksalmon;
border: 1px solid #000;
}
<div class="products">
<div class="box">
<p>Ola</p>
</div>
</div>
I want the paragraph to appear inside a square. The code as it is shows that the 2 divs are together. And only the content inside the paragraph appears.
This image ilustrates the format I intend:
.products
{position:relative;
width: 100%;
height: 500px;
background: gray;
}
.box
{p
width: 250px;
height: 300px;
background: darksalmon;
border: 1px solid #000;
}
<div class="products">
<p>Ola</p>
</div>
<div class="box">
</div>
try this...
background-color: ;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
Have you tried
<p class="box">...</p>
removing the div wrapping your paragraph?
Related
I am trying to make an H page layout:
body {
background-color: grey;
background-size: 100%;
background-repeat: no-repeat;
}
html,
body {
height: 100%;
margin: 0px;
}
.a {
float: left;
width: 25%;
height: 100%;
border: 1px solid blue;
}
.b {
float: left;
width: 50%;
height: 60%;
border: 1px solid blue;
}
.c {
float: left;
width: 50%;
height: 40%;
border: 1px solid blue;
}
.d {
float: right;
width: 25%;
height: 100%;
border: 1px solid blue;
}
<div class="a">
text
</div>
<div class="b">
text
</div>
<div class="c">
text
</div>
<div class="d">
text
</div>
but for some reason my last div goes to the bottom
I was curious if I can do what I want but on flexbox so I tried this as well
How to split page into 4 equal parts?
http://jsfiddle.net/scriv/ye6bd4ow/4/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
float: left;
}
#div1 {
background: #DDD;
width: 20%;
height: 100%;
}
#div2 {
background: #AAA;
width: 60%;
height: 60%;
}
#div3 {
background: #777;
width: 60%;
height: 40%;
}
#div4 {
float: right;
background: #444;
width: 20%;
height: 100%;
}
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
Same result but I think a little closer than the 1st example
I know this is a very controversial question but any help even an opinion of which approach u think is best is appreciated. Thanks in advance!
There are two issues to fix (if you want the float version to work):
1.) You need to use box-sizing: border-box; to include the border in the width measurement, otherwise (see your snippet) the fourth element will slip below the third one since there isn't enough space for it (only by a few pixels, but nevertheless).
2.) You need to change the order in the HTML: d should be the third element so that it can be at the top of the page/container:
* {
box-sizing: border-box;
}
body {
background-color: grey;
background-size: 100%;
background-repeat: no-repeat;
}
html,
body {
height: 100%;
margin: 0px;
}
.a {
float: left;
width: 25%;
height: 100%;
border: 1px solid blue;
}
.b {
float: left;
width: 50%;
height: 60%;
border: 1px solid blue;
}
.c {
float: left;
width: 50%;
height: 40%;
border: 1px solid blue;
}
.d {
float: right;
width: 25%;
height: 100%;
border: 1px solid blue;
}
<div class="a">
text a
</div>
<div class="b">
text b
</div>
<div class="d">
text d
</div>
<div class="c">
text c
</div>
I want to center horizontally a div but it works in Google Chrome but in IE not work.
This is my code:
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
width: fit-content;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
fit-content is experimental and won't work in ie or edge: https://developer.mozilla.org/en-US/docs/Web/CSS/width.
Make it display: inline-block instead and put text-align: center on the parent
.app-content {
width: 100%;
height: calc(100%);
position: relative;
text-align:center;
}
.pagination--custom {
display:inline-block;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
Try This: Tested its working!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.pagination--custom {
width: 50px;
height: 50px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
</body>
</html>
JUST SET margin: 0 auto; for pagination
Your margin: 0 auto; has to be on .pagination and remove width: fit-content;.
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
margin: 0 auto;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
I write this code: jsfiddle.net/4ror198u/1/
That zombi class is ok and when my mouse goes over it it show me that pink box, but why when my mouse is over blue i canno't see the green class ?
Can you help me where im wrong and what i need to do to fix this problem, also to suggest some examples why this thing hapening and how to prevent it in feature.
Thanx in advance! :)
You have misplaced the class green with class shell so I rearranged that and I placed some attributes to the .green class in order the difference to be obvious.The blue box works exactly as the effect that you have for the zombieone.
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: yellow;
margin: 0;
padding: 0;
}
.zombitwo {
height: 200px;
width: 200px;
background: pink;
border-radius: 10px;
text-align: center;
line-height: 200px;
display: none;
}
.zombione:hover + .zombitwo {
display: block;
}
.black{
//border: 5px solid red;
background-color: black;
width: 300px;
height: 300px;
}
.blue{
width: 300px;
height: 300px;
background-color: blue;
//border: 5px solid blue;
}
.green{
height: 300px;
width: 300px;
background-color: green;
color:red;
//border: 5px solid green;
display: none;
text-align:center;
}
.blue:hover + .green{
display: block;
}
</style>
<div class="zombione">test</div>
<div class="zombitwo">work</div>
<div class="wrapper">
<div class="shell">
<div class="black">
<div class="blue">
<div class="shell">
</div>
</div>
<div class="green">
<div class="shell">
<div class="sblack"></div>
<div class="sred"></div>
<div class="sgreen">It works fine!!</div>
</div>
</div>
</div>
</div>
</div>
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/
<html>
<head>
<style>
div#one{
display: inline-block;
border: 1px solid green;
width: 200px;
height: 200px;
}
p {
border: 1px solid black;
}
div {
display: inline-block;
border: 1px solid green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="one">
<p>Something here</p>
</div>
<div></div>
</body>
</html>
This is my code, I expected the divs to be arranged side-by-side but they are not. Why?
Add
vertical-align:top
to div.
JSFiddle demo
You shouldn't use inline-block in this case. This may cause errors on old browsers (IE;).
Use "float" instead. http://jsfiddle.net/Tymek/HM835/
div {
display: block; /* this */
float: left; /* and this */
border: 1px solid #0F0;
width: 200px;
height: 200px;
}
#one {
border-color: #F00;
width: 200px;
height: 200px;
}
p {
border: 1px solid #000;
}
<div id="one">
<p>Something here</p>
</div>
<div>
Lorem ipsum
</div>