HTML Box alignment - html

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>

Related

align div horizontally after screen resize using css

I'm trying to align div horizontally as the browser resizes, currently, I have 3 divs. As per the requirement, I can add an additional div. My problem is as soon I increase the window size above 2500, the right side of the screen becomes empty & all the divs are floating to left. As I cannot set the div width to 30-33% as per the requirement. Below is my code. kindly help.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
float: left;
display: flex;
width: 100%
}
div.box {
float: left;
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 30%;
border: 1px solid #cccccc;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>

As #Arman Ebrahimi had already mentioned correctly. Use flex box only. The issue of responsibility can be handled well with media queries.
Working example
* {
box-sizing: border-box;
}
div.box-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
gap: 10px;
width: 80%;
margin: 0 auto;
/* or use justify-content: center; */
}
.box {
background-color: #f1f1f1;
padding: 10px;
flex: 30%;
border: 1px solid #cccccc;
word-break: break-word;
height: 326px;
}
#media (max-width: 800px) {
.box {
flex: 100%;
}
}
<div class="box-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>

Remove float and only use flex:
* {
box-sizing: border-box;
}
body,
html {
margin: auto;
}
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
}
div.box {
background-color: #ffffff;
padding: 10px;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: calc(100vw / 3);
/*calc(100vw / number of div)*/
border: 1px solid #cccccc;
word-break: break-word;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>

Use justify-content: center; when you are using flex. This means the flexed contents will always be centered on all screen types.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 33.33%;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Edit ~ add another div, reduce the % the div covers. Demonstrate min-width responsiveness.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 24%;
min-width: 300px;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>

How to make the dot/circle in front of the rectangle?

I am trying to build a simple page where I was wondering how do I make the circle with the paragraph comes on top of the rectangle so that the rectangle and the text will appear in the front(on the top)? thank you so much for your help,
.dot {
height: 200px;
width: 200px;
background-color: lightgrey;
border-radius: 50%;
display: inline-block;
margin-bottom: -5rem;
}
.rectangle {
height: 200px;
width: 850px;
background-color: #555;
}
.rectangle-vertical-1 {
height: 180px;
width: 120px;
background-color: lightgrey;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-2 {
height: 180px;
width: 120px;
background-color: #a3a3a3;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-3 {
height: 180px;
width: 120px;
background-color: #4d4c4c;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-container {
position: relative;
margin-top: -9rem;
"}
<div class="container">
<div style="position: relative;">
<div style="text-align:center">
<div class="dot">
<h4>Melrose</h4>
<p>abc</p>
</div>
<div>
<div style="text-align:center">
<div class="rectangle">
<img class="img" src="https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg" alt=""> </div>
<div class="rectangle-vertical-container">
<span class="rectangle-vertical-1"></span>
</div>
</div>
</div>
</div>

How to set vertical height in CSS?

I need to give vertical height for the right element with full background. I tried by setting
height:100%;
max-height: 100%
but the element takes only content height
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>

Try giving the .clearfix class a display:flex and height:100%
.clearfix {
display: flex;
height: 100%;
}
Example below
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
.clearfix {
display: flex;
height: 100%;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>

See this:
I have added display: flex for .full_container
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.full_container {
height: 350px;
border: 1px solid #ddd;
display: flex;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>

Image and text in contact bar

Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.contact_bar_text {
width: 100%;
}
.contact_bar_call {
background-image: url(/images/call.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
float: left;
margin-right: 100px;
}
.contact_bar_email {
background-image: url(/images/email.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_call">
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_email">
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.

Here a solution using img html tag instead of background-image. I edited a bit your html code.
So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.contact_bar_content{
display: flex;
align-items: center;
padding: 0 15px;
}
.contact_image{
height: 15px;
width: 15px;
background-color: red;
margin-right: 5px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>

Making a footer that has small div boxes inside of it responsive to the size of the browser window

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/