Take a look at this jsfiddle
I'm trying to make my div to the right use the entire width and height of the parent div.
Any idea what I'm doing wrong?
Here is the HTML
<div style="width:150px;padding:0;min-height:200px;">
<div style="width:100%;background-color:#99CD4E;">
<div style="width:35px;padding:5px;display:inline-block;border: solid 1px #ff0000;">
<img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>
</div>
<div style="height:100%;display:inline-block;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div>
</div>
Instead of styling them with display:inline-block you could style the divs with display:table-cell and give that particular div a width of 100%.
jsFiddle example
<div style="width:150px;padding:0;min-height:200px;">
<div style="width:100%;background-color:#99CD4E;">
<div style="width:35px;padding:5px;display:table-cell;border: solid 1px #ff0000;">
<img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>
</div>
<div style="height:100%;width:100%;display:table-cell;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div>
</div>
Related
Recently I've been updating my site for mobile browsers and have come across a problem with DIV centering and widths.
Essentially I have an inline block of three boxes (DIVs), which sit inside a container DIV. Each of the three boxes adapts its width by a % and this works fine on desktop browsers but on mobile the boxes get pushed down below each other and remain left aligned with their minimum width unchanged (i.e. big blank space created on the right side).
However what I'd like to do is have the boxes become centre aligned when they're pushed down and for each of them to then expand their width to 100% of the container so as to use all the available container width.
<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;">
<div style="float:left;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="float:left;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="float:left;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
Now I could use Media Queries to solve this (have it adopt float:none and some manual tweaking etc.) or jQuery but I feel like I'm overlooking something simple in vanilla CSS that could do it for both mobile and desktop browsers. Is there a way that's simple and as backwards compatible as possible?
Try this.
I removed float:left from inner divs and made it display:inline-block.
Also added text-align:center to container.
<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;text-align:center">
<div style="display:inline-block;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
Solution 1: using Media queries
First of all I have changed your inline-css to classes , so that you can easily control them with css.
Secondly I have use simple flexbox approach to solve the problem.
you need to use media query to control the css behaviour for mobile.
Here is the working code:
.box{float:left;margin:auto;min-width:33%}
.section-boxes{width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;}
#media(max-width:768px){
.section-boxes{text-align:center; display:flex; flex-direction:column;}
.box{width:100%;}
}
<div class="section-boxes">
<div class="box">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div class="box">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div class="box">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
Solution 2: Using inline css
Using display:inline-block on the box elements
Using calc() method to calculate the width of each box so it works both on mobile and desktop with one code.
Here is the working code:
<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden; text-align:center">
<div style="display:inline-block;margin:0 auto;min-width:calc(33% - 8px);">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:0 auto;min-width:calc(33% - 8px);">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:0 auto;min-width:calc(33% - 8px);">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
I have a div container of width and height 420px inside that container i have 4 small div's with width 140px and height 140px but 2nd divs height is 170px.if i apply css float property float:left to all the divs except container div.
Q1).where will the 4th div sit.
Q2).if i want the 4th div to come below 1st div how can i do it without using position:absolute or relative.
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
css
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
Here is the link for my code JSFiddle
Define your .section4{clear:left;}
Demo
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
.section4{clear:left;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
2nd option your can try to display:inline-block as like this
.container{width:420px;height:420px;border:1px solid black;font-size:0;}
.section1{width:140px;height:140px;background-color:green;display:inline-block;vertical-align:top;font-size:12px;}
.section2{width:140px;height:170px;background-color:yellow;display:inline-block;vertical-align:top;font-size:12px;}
.section3{width:140px;height:140px;background-color:red;display:inline-block;vertical-align:top;font-size:12px;}
.section4{width:140px;height:140px;background-color:orange;display:inline-block;vertical-align:top;font-size:12px;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
Add clear: both to your 4th div:
https://jsfiddle.net/8kyed4fx/1/
Hello guys I am using boostrap for my website and I want a border to take the whole width of a specific div. This is what I have so far:
and I want to make it on the whole div. I tried display:block width:100%, it just doesn't want to work.
Anyone for a solution ?
CSS
.borders {
border-top: 1px solid #dedbdb;
}
HTML
<div class="row">
<div class="col md-4 borders">
<p><span class="glyphicon glyphicon-user"></span>{numberAttending} {numberMaybe} {numberNotAttending}</p>
</div>
</div>
The reason that your border is not taking up the entire width is because your row has padding on it.
<div class="row no-padding">
<div class="col md-4 my-styles">
<p><Content here.</p>
</div>
</div>
.no-padding {
padding: 0;
}
.my-styles {
border-top: 1px solid #dedbdb;
padding: 15px;
}
still learning how to lay out with div and css. I have the following html:
<div id="Fascione">
</div>
<div id="Wrapper">
<div id="Menu">
</div>
<div id="Contenuto">
<div id="Liturgia">
</div>
<div id="Container">
<div id="Ristorante">
</div>
<div id="Insieme">
</div>
<div id="Progetto">
</div>
</div>
<div id="Unitre">
</div>
</div>
</div>
<div id="Footer">
</div>
and css looks like:
html, body{width:100%;height:100%;}
body{width:1024px; margin:0px auto;padding:0px;border-width:0px;}
div#Fascione{width:inherit;height:125px;border-bottom:2px solid black;}
div#Wrapper{width:inherit;padding:8px 0px 8px 0px;/*background-color:#647;*/}
div#Menu{float:left;width:200px;/*background-color:#F41;*/}
div#Contenuto{margin-left:208px;/*background-color:#9bb;*/}
div#Liturgia{float:left;width:34%;margin-bottom:1%;background-color:#987;}
div#Container{float:left;width:65%;margin-bottom:1%;margin-left:1%;background-color:#aaaaaa;}
div#Ristorante{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#123;}
div#Insieme{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#abc;}
div#Progetto{float:left;border-top:1px solid gray;background-color:#369;}
div#Unitre{clear:left;border-top:1px solid gray;background-color:#de7;}
div#Footer{clear:left;width:inherit;height:40px;border-top:2px solid black;/*background-color:#1a9;*/} /* clear left needed! */
what I would like to do is to have the "Progetto" div bottom border stick together with the "Unitre" top border.
Reading other posts I tried to set the "Container" with position:relative and the "Progetto" with position:absolute;bottom:0px; but this does not do what I need.
Can anyone help me?
Setting containers with position relative is not a good practice.What you should try to do is zero out the margins beetween the two divs and only add border to the needed sides for example:
Proggetto{
//no bottom border;
border:1px 1px 0 1px;
border-color:black;
margin:0;
}
Unitre{
border:1px solid black
margin:0;
}
As my CSS and HTML skills are somewhat limited can anyone advise if the code below can be refactored without so many div tags?
<div style="border: 1px solid #D0D2D1">
<div style="border: 8px solid #F6F4F5">
<div style="padding: 0.5em">
Content Here
</div>
</div>
</div>
<div style="border: 1px solid #D0D2D1">
<div style="border: 8px solid #F6F4F5; padding: 0.5em">
Content Here
</div>
</div>
Should work the same.
You could lose at least one by combining the padding from the inner div with the middle one:
<div style="border: 1px solid #D0D2D1">
<div style="border: 8px solid #F6F4F5; padding: 0.5em;">
Content Here
</div>
</div>
Unfortunately if you want two different border colours, you're going to be stuck with at least 2 of the divs
Here's a different approach (as Matt said, it's impossible to go below 2 DIVs if you want different border colors)
:
<div style="border:1px solid #D0D2D1; background-color:#F6F4F5; padding:8px">
<div style="background:white; padding:.5em">
Content here
</div>
</div>