Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i know this has been asked before an such, but i've tried like 5 different ways from Stack and 5 from other websites, and i can't seemsto find the right one.
It's a simple problem, the php_content div aren't getting bigger as it should be with content put into it.
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.code .if{
position: absolute;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>
Your php_content div contains a div that is absolutely positioned, which means php_content cannot match the size of its contents.
The fix is to remove this:
.code .if{
position: absolute;
}
Live Example:
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
height: auto !important;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.code .if{
position: relative;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>
Change position: absolute to relative in the .code .if block. This way the reference will be set to the div containing it.
Related
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I tried to set side by side this two groups of classes, but i couldn't..
i tried to use display:flex , float:left and any other css attribute but didn't work in here.
.building{
width: 100px;
height: 200px;
margin:auto;
background-color: #843533;
border-style: solid;
box-shadow: 2px 2px black;
padding: 10px;
}
.building .windowL{
width: 30px;
height: 40px;
background-color: #8e8383;
margin-bottom: 10px;
}
.building .windowR{
width: 30px;
height: 40px;
background-color: #8e8383;
margin-bottom: 10px;
margin-left:40px;
}
<div class="building">
<div class="windowL"></div>
<div class="windowL"></div>
<div class="windowL"></div>
<div class="windowL"></div>
<div class="windowR"></div>
<div class="windowR"></div>
<div class="windowR"></div>
<div class="windowR"></div>
</div>
Do you want it to look like this?
So, we can just float the windows inside the building with a common class window and set the margin-left and margin-bottom for getting the windows aligned!
.building {
width: 100px;
height: 200px;
margin: auto;
background-color: #843533;
border-style: solid;
box-shadow: 2px 2px black;
padding: 10px;
}
.building .windowL{
width: 40px;
height: 40px;
background-color: #8e8383;
margin-bottom: 10px;
float:left;
margin-left:7px;
}
.building .windowR{
width: 40px;
height: 40px;
background-color: #8e8383;
margin-bottom: 10px;
float:left;
margin-left:7px;
}
<div class="building">
<div class="windowL"></div>
<div class="windowR"></div>
<div class="windowL"></div>
<div class="windowR"></div>
<div class="windowL"></div>
<div class="windowR"></div>
<div class="windowL"></div>
<div class="windowR"></div>
</div>
So, whenever there is content inside the boxes, they align weird and not side by side. How do i fix this? Ive tried quite alot and i havent been able to figure it out.
Any help here would be greatly appreciated/
So i have This as my main code:
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
Add box-sizing: border-box; at ".donator-box"
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
I want to leave some space before the p tag.But now I is sticked to the left side.I want to leave 100px before the p tag.
I attached my css and html.There name and email is stricked to the left position.
p {
margin-left:100px;
}
.outer {
margin-left: 20%;
margin-top: 0%;
margin-bottom: 3%;
height: 737px;
width: 60%;
box-shadow: 10px 10px 5px #888888;
border: 1px solid #f9f2f2;
border-radius: 10px;
}
button.logout {
display:inline;
float:right;
margin-right:10px;
margin-left: 5px;
}
.lout {
float: right;
display: inline-block;
margin-top:20px;
}
.log {
width:60%;
height: 10%;
position:absolute;
border: 1px solid #f9f2f2;
border-radius: 10px;
border: 0px solid #f9f2f2;
text-align: center;
line-height:20px;
border-width: 0px 0px 1px 1px;
display:inline-block;
}
.rest {
padding:7%;
height: 580px;
padding: 10% 7px;
}
.sidemenu {
float: left;
margin-top: 140px;
width: 100%;
}
hr {
margin: 0;
width: 1px;
height: 658px;
border: 0;
background: #000;
float: left;
}
.content {
}
.side {
width: 24%;
float: left;
display: inline-block;
}
<div class="outer">
<div class="log">
<form name="profile" method="post" class="lout">
<button class="done" name="done">Done</button>
<button class="logout" name="logout">Logout</button>
</div><!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu"></div>
</div><!--End of side div -->
<hr>
<div class="content">
<h1>Profile</h1>
<br>
<br>
<br>
<br>
<p>name</p>
<p>email</p>
</form>
</div><!--End of content -->
Your <div class="side"> has a float: left. But since the div is short and your <div class="content"> is longer, it wraps around the side div. All you need is a floating for the content as well:
.content {
float: left;
}
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/