We Keep Coding

Having issue displaying div to full width on a page

I am trying to display divs side by side on a page. However, if there is only one col-md-6 div class on the page, then I am trying to display it full width(100%) rather than 50%. Currently it's using only 50% even if there is only one col-md-6. Is there a way to do this using CSS?
Here is the my HTML and CSS:
<div class="col-md-6 textcontent">
</div>
<div class="col-md-6 service">
</div>
<div class="col-md-6 textcontent">
</div>
CSS
.col-md-6{
width50%;
}

Flexbox is the way to go here. Here is an example:
.wrap {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.item {
flex-grow: 1;
/* For display purposes */
padding: 1rem;
}
.pink {
background-color: pink;
}
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
.orange {
background-color: coral;
}
<section class="wrap">
<div class="item pink">
Content 1
</div>
<div class="item blue">
Content 2
</div>
<div class="item green">
Content 3
</div>
</section>
<section class="wrap">
<div class="item orange">
Content Solo
</div>
</section>
https://jsfiddle.net/willihyde/aqrs410u/1/

If you are using the bootstrap, You can use the col-md-12 class to add a full width column. bootstrap grid system is coming as a fraction system and your number will be divide by 12. So if we divide the 6 by 12 the answer is 0.5 and that means 50%. That's why it's adding a 50% width column. So when we add 12 it will divide by 12/12 and the width will be 100%. You can follow the Bootstrap grid system guideline to learn more about the various width ratios and how to make a responsive grid.
<div class="col-md-12 service"></div>
If you are trying to build this by yourself, Define another class with a name and add the width: 100%;
.col-md-12{
width:100%;
}
Then add that class name to your html class attribute
<div class="col-md-12 service"></div>

Issue with positioning div elements in a web calendar

I am writing an html calendar and got stuck on positioning divs. I generate the divs dynamically and they stack on top of each other which is ok most of the time. Some times I need to create a div and have it placed at the top of the page right next to the first created div. If I use float it moves over too far and does not go to the top. I could use position to accomplish this, but it gets complicated. Just seems it should be easy to drop it up to the top like it would in a table using valign=top. I added some css positioning to show where I want the div, but if possible, I would like to do it without position. Any suggestions on good ways to position a div would be much appreciated.
#container{
width:200px;
height:200px;
background-color:blue;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
float: right;
position:relative;
top:-100px;
left:-100px;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
</div>

Let's call the calendar tiles "source divs", and for the div you want to appear positioned to the right of the 1st "source div", we'll ascribe the term "target div".
I recommend that you position your target div inside of the source div. This semantic relationship will make it very easy to position the target div correctly, using left: 100%;:
.calendar { font-size: 0; }
.src {
position: relative;
font-size: 14px;
display: inline-block;
width: 30px; height: 30px;
outline: 1px solid #000;
}
.src:hover:after {
content: "";
position: absolute;
display: block;
width: 100%; height: 100%;
left: 100%; top: 0;
background-color: #ff0000;
}
<div class="calendar">
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
</div>
Hover any source div to see the corresponding target div.

Perhaps you should look at using a grid layout in the cell . you would have much better control of how the content appears in the cell without having to work with floating div's .Also a layout in a grid container keeps things uniformed and prevents overlapping using
grid-template-columns: auto auto auto;
If you only want 2 columns at the top just change it to
grid-template-columns: auto auto ;
here is a link grid layouts
and
flexbox vs grid
#container{
width:200px;
height:200px;
background-color:blue;
display: grid;
grid-gap: 2px;
grid-template-columns: auto auto auto;
grid-template-rows: 60px auto auto;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
<div id=item3></div>
<div id=item3></div>
<div id=item1></div>
<div id=item1></div>
<div id=item1></div>
</div>

How to position <div> absolute to parent and relative to neighbors

I'm working on a simple little project right now and I can't seem to figure out the styling.
Basically, what I need to do is position a 'div' a certain number of pixels down from the top of its parent. To do this I made its position absolute and set top to whatever pixel offset I need. The problem with this is sometimes two 'div's will be at the same vertical position (or close to it) in the parent and will overlap. I need to have them line up side by side horizontally when they are overlapping. I know how to do this with a position of relative and the float property but this then breaks the vertical positioning.
The boxes are inserted dynamically with jQuery and their positions can change frequently.
Here is a jsfiddle to demonstrate.
HTML
<div class="main">
This is okay
<div style="top: 25px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 100px;" class="sub">
<h3>
test
</h3>
</div>
<div style="position: absolute; top: 200px;">
This is the problem
</div>
<div style="top: 250px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 260px;" class="sub">
<h3>
test
</h3>
</div>
</div>
CSS
.main {
background-color: grey;
height: 700px;
}
.sub {
border: thin solid black;
position: absolute;
}

you may make the sub div's inside other div and give this one absolute position
.main {
position:relative;
background-color: grey;
width:100%;
height:auto;
}
.sub {
position: absolute;
top:100px;
width:100%;
}
.child {
border:2px solid black;
width:500px;
height:500px;
margin:10px auto;
}
<div class="main">
<div class="sub">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
if you want them horizontally add to .child
float:left;
width:47%;
margin:1%;

As far as I can tell this isn't solvable with CSS. I ended up doing some decently complex javascript to detect collisions and reposition the div's appropriately.

How to fit child div inside the padding of parent class?

I am creating columns inside a row using Foundation CSS front-end framework.
<div class="row small-up-2 large-up-3 food-container">
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
</div>
This is my CSS:
.column, .columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.food-wrap { position: relative; }
.food-wrap > .panel {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }
.food-wrap .thumbnail {
border: medium none;
box-shadow: none;
}
Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"
Any help is appreciated.

I know the answer to this post now. I still to post the answer so it can help out other developers out there.
The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.

Trying to get equal height columns with expanding text whilst using overflow with CSS transitions

Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?