I have three divs with equal width and the third div to expand to full width below a breakpoint (991px to be exact) and all the divs stack upon each other when browser width is below 767px, and now i want equal margins(between divs & at the edges) so please let me know a way out. And I want to achieve this without any frameworks i,e just with the help of css.
Here's the code:
* {
box-sizing: border-box;
}
h1 {
margin: 25px;
text-align: center;
}
div[class|=col] {
position: relative;
margin-bottom: 10px;
border: 1px solid black;
}
html,
body {
margin: 15px;
}
.title {
border-left: 1px solid black;
border-bottom: 1px solid black;
width: 25%;
position: absolute;
top: 0px;
right: 0px;
color: black;
text-align: center;
}
#Title1 {
background-color: orange;
}
#Title2 {
background-color: white;
}
#Title3 {
background-color: green;
}
p {
background-color: gray;
width: 100%;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 25px;
font-family: Helvetica;
color: black;
}
.row {
width: 100%;
}
<div class="row">
<div class="col-lg-4 col-md-6 ">
<section id="Title1" class="title">Chicken</section>
<p>Some text</p>
</div>
<div class="col-lg-4 col-md-6">
<section id="Title2" class="title">Beef</section>
<p>Some text</p>
</div>
<div class="col-lg-4 col-md-12">
<section id="Title3" class="title">Sushi</section>
<p>Some text</p>
</div>
</div>
Add classes to the 3 div's: div-1, div-2, div-3
#media only screen and (max-width:766px) {
.div-1.div-2.div-3 {
margin-bottom: 10px;
}
}
Like this you can add margin's for a particular resolution as per your requirement.
Related
I am trying to create a website where I have divs side by side in a list (separated by a vertical line). I am referencing this design
I am having trouble making the design responsive: I tried using % but when resizing the browser, the divs containing my text content move down and awkwardly collide/crash into each other (and don't stay separated by the vertical line). I am wondering if anyone knows how to keep the divs separated and responsive when resizing
#experience {
border: 1px solid red;
padding-top: 0px;
margin-top: 0px;
min-height: 1000px;
}
.center_text {
border: 1px solid black;
padding-top: 1%;
text-align: center;
color: #001418;
font-weight: 600;
font-family: 'Josefin Sans', sans-serif;
font-size: 2em;
}
.vline {
height: 740px;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
.circle2 {
border: 50px solid black;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
#exp1 {
border: 1px solid blue;
font-family: 'Josefin Sans', sans-serif;
color: #182153;
margin-top: -43%;
height: 150px;
}
.circle:before {
content: ' \25CF';
font-size: 20px;
margin-left: 49.69%;
}
.exp_text {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin: 0 auto;
border: 1px solid red;
margin-top: -2%;
min-height: 110px;
}
.left_exp {
border: 1px solid green;
text-align: right;
margin-left: 25%;
}
.right_exp {
margin-top: -5.8%;
border: 1px solid green;
width: min-content;
margin-left: 60%;
}
.date {
font-size: 1.3em;
font-weight: 600;
}
.company {
font-size: 1.3em;
font-weight: 600;
}
.role {
font-size: 1em;
min-width: 250px;
}
.job_descr {
font-size: 1em;
min-width: 250px;
}
<div id="experience">
<h3 class="center_text"> Experience</h3>
<div>
<hr class="vline" />
<div id="exp1">
<span class="circle"></span>
<div class="exp_text">
<div class="left_exp">
<div class="date">
<p>2022 </p>
</div>
<div class="role">
<p>Software Engineering Intern</p>
</div>
</div>
<div class="right_exp">
<div class="company">
<p>Company Name</p>
</div>
<div class="job_descr">
<p>Description.................</p>
</div>
</div>
</div>
</div>
</div>
</div>
The solution was to use flexbox.
#experience_content {
margin: 0 auto;
min-height: 100vh;
width: min-content;
}
.row {
display: flex;
}
.column {
color: black;
flex:33.3%;
padding: 20px;
}
and
<div id="experience">
<div id="experience_content">
<div class="row">
<div class="column">
</div>
</div>
</div>
</div>
.container {
display: flex;
justify-content: start;
border-right:1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before{
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
I'm creating a page layout. Inside the container, there are two containers- side-nav and main-content. In the main-content, there is a p tag with some demo text. the p tag is surrounded by two border containers. I m not able to extend the border lines upto the main container width. I have given a snippet of it, Can someone please help me to resolve this issue.
If I understand you correctly, add flex: 1 to .main-content so it will take the whole width that left.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
flex: 1;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
But seems you have more problems here. For example, if there is no enough space, the right border is displayed on top of the text. Also, small extra top and bottom borders in the left of the .main-content. What're you trying to do? How it should look?
You have given right:22px in your :before. That's causing the issue here.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
p {
word-break: break-word;
padding:10px
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
<p style="padding:0 10px;margin:0">two</p>
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
I honestly have no idea what you're trying to do here, but the modified example below looks a bit better, no?
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
padding: 0 20px;
word-break: break-word;
}
.divider {
border-top: 1px solid tomato;
border-bottom: 1px solid gray;
display: block;
margin: 0 -20px;
position: relative;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<hr class="divider" />
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<hr class="divider" />
</div>
</div>
I don't see the reason for having the :before element within the divider if it then has the same color as the border anyways, you could just make the border 2px...or more generally, even if you need different colors, you can just work with top/bottom borders and you don't need the :before at all, you could also choose to got with an <hr /> element for that purpose, would be more semantic anyways =)
I have bootstrap column arrangement as following and have few divs with different height inside the columns.
HERE IS THE CODEPEN
.column>div {
border: 1px solid #333;
background: #ddd;
color: white;
padding: 15px;
margin: 5px 0;
text-align: center;
font-size: 18px;
}
div#child-1 {
height: 150px;
}
div#child-2 {
height: 50px;
}
div#child-3 {
height: 50px
}
div#child-4 {
height: 100px;
}
div#child-5 {
height: 100px;
}
div#child-6 {
height: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 column">
<div id="child-1">1</div>
<div id="child-3">3</div>
<div id="child-5">5</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 column">
<div id="child-2">2</div>
<div id="child-4">4</div>
<div id="child-6">6</div>
</div>
</div>
</div>
When it comes to mobile devices, I need to use col-xs-12 for each columns.
Now I need to have the following structure formed in the responsive #child-1, #child-2, #child-3, #child-4, #child-5, #child-6.
But for now I have the pattern mixed as #child-1, #child-3, #child-5, #child-2, #child-4, #child-6.
How can I swap these elements to the alignment that I wanted?
I think float can be helpful for such layout then on small device you can switch to flexbox (or even CSS-grid) and adjust the order. The main trick is to have all the elements inside one container so that you can easily handle them:
.container {
max-width:1124px;
margin:auto;
}
.column>div {
border: 1px solid #333;
background: #ddd;
color: white;
padding: 15px;
margin: 5px;
text-align: center;
font-size: 18px;
box-sizing:border-box;
width:calc(50% - 10px);
}
div#child-1 {
height: 150px;
float:left;
}
div#child-2 {
height: 50px;
float:right;
}
div#child-3 {
height: 50px;
float:left;
}
div#child-4 {
height: 100px;
float:right;
}
div#child-5 {
height: 100px;
float:left;
}
div#child-6 {
height: 150px;
float:right;
}
#media (max-width:767px) {
.container {
display:flex;
flex-direction:column;
}
.column > div {
width:auto;
}
#child-1 {order:1}
#child-2 {order:2}
#child-3 {order:3}
#child-4 {order:4}
#child-5 {order:5}
#child-6 {order:6}
}
<div class="container column">
<div id="child-1">1</div>
<div id="child-2">2</div>
<div id="child-4">4</div>
<div id="child-3">3</div>
<div id="child-6">6</div>
<div id="child-5">5</div>
</div>
If a user is signed up to my site, in their login area I have 3 divs as follows:
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
These divs all have a width of 32% and sit inline with each other.
#psts-cancel-link {
background: white;
border-left: 3px solid #ccc;
padding: 1em;
width: 32%;
min-height: 270px;
float: left;
}
.psts-receipt-link {
background: white;
border-left: 3px solid #ccc;
min-height: 270px;
float: left;
width: 32%;
margin: 0 10px;
padding: 20px;
}
#psts-signup-another {
background: white;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
width: 32%;
min-height: 270px;
float: left;
}
When a user is not signed up, only one of the divs displays:
<div id="psts-signup-another"></div>
Is it possible to change the styling of this so that it's width is 100% when div1 and div2 aren't displayed?
So far I have tried this, but with no success:
#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
width:100%;
}
Table Layout Implementation
Use a table layout. Specify display: table on the parent and display: table-cell on the child elements.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
display: table-cell;
word-wrap: break-word;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.container {
display: table;
width: 100%;
table-layout: fixed;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
Flexbox Layout Implementation
You can also use flexbox which expands and shrinks the child items according to the parent container.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
flex: 1;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
flex: 1;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
flex: 1;
}
.container {
display: flex;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
You could simply use :first-child if it's indeed the only child in the second case.
#psts-signup-another:first-child {}
You can use the adjacent selector. Have a look at the following snippet:
#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}
<h2>Div when three divs are present</h2>
<div class="theDivs">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
<div id="psts-signup-another"></div>
</div>
i think you should use another container div with a new class when user logout.
Logged:
<div class="container">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logout:
<div class="container logout">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
CSS:
.container.logout > div {
display:none;
}
.container.logout > .psts-signup-another {
display:block;
}
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }