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>
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'm struggling with getting identical behaviour for a flexbox layout in different browsers (nevermind browsers that don't support flexbox).
Here's the markup:
<!-- nested version -->
<div class="flex-container"> <!-- display: flex -->
<div>
<div class="flex-container inner"> <!-- display: flex -->
<div class="auto-width">
auto take up needed space
</div>
<div class="flex-width"> <!-- flex: 1 -->
flex take up remaining space
</div>
</div>
</div>
</div>
My problem is that IE11 behaves differently to Firefox and Chrome. I would expect that the width of the nested flexbox flex-container.inner will be unrestricted, since nowwhere do I set any width.
Here is a JSBin to illustrate the problem: http://jsbin.com/pabesaci/5. Example 3 is the problematic one which renders differently in IE.
Rendering in IE
Rendering in Chrome (FF is similar)
Is this a bug in IE?
Can you suggest other ways to achieve this layout?
<p>My example:</p>
<div style="float:left; display:block; width: auto; border: solid 2px red; padding: 2px;">
<div>
<div style="float:left; display: block; border: solid 2px yellow; padding:2px;">
<div style="float:left; display: block; border: solid 2px green;">
auto take up needed space
</div>
<div class="" style="float:left; position:relative; display:block; border: solid 2px blue;">
flex take up remaining space
</div>
</div>
</div>
</div>
I want to do the following with div construction:
<table border="1">
<tr>
<td>Field 1</td><td><input type="text"></td>
</tr>
<tr>
<td>Field 2 longest</td><td><input type="text"></td>
</tr>
<tr>
<td>Field 3 long</td><td><input type="text"></td>
</tr>
</table>
http://jsfiddle.net/6AvMm/
the main problem is, how to do the first column as width as the longest (field 2) ? You know, tables are only for tabulary datas - and this case is clearly a layout.
using display:table display:table-row; AND display:table-cell;
Updated fiddle
HTML:
<div class="holder">
<div class="row">
<div class="cell">Field 1</div>
<div class="cell"><input type="text" /></div>
</div>
<div class="row">
<div class="cell">Field 2</div>
<div class="cell"><input type="text" /></div>
</div><div class="row">
<div class="cell">Field 3</div>
<div class="cell"><input type="text" /></div>
</div>
</div>
CSS:
.holder{
display:table;
border:1px solid #000;
border-width:1px 1px 0 0;
}
.row{display:table-row;}
.cell{
display:table-cell;
border:1px solid #000;
border-width:0 0 1px 1px;
}
DEMO
This would typically be done with floats. Using display: table is usually still not advised for layouts.
<div class="column">
<div class="row">
<p>Your content</p>
</div>
<div class="row">
<p>Your content (longest field)</p>
</div>
</div>
<div class="column">
<div class="row">
<p>Your content</p>
</div>
<div class="row">
<p>Your content</p>
</div>
</div>
CSS:
.column{
float: left;
}
Demo Fiddle
This provides a lot of flexibility as you can easily adjust the amount of rows separately in each column, or simply skip the whole "row" thought and just write your content with headings in the column divs. Example
Using this method, you will have a lot more control over margins and positioning (needed for layouts), compared to the table method.
It seems like you're trying to move away from tables because of the semantic reason that tables are not suitable for layout. Therefore, I think you will have problems with your layout in the future if you just use display: table-cell and the way that property functions is changed. I would recommend using something like the following CSS to abandon tables completely:
div.tr {
display:block;
border: 1px solid;
position: relative;
padding: 3px;
}
div.tr div.td {
display: inline-block;
border: 1px solid;
padding: 3px;
}
div.tr div.td:first-child {
min-width: 35%;
}
.table {
width: 40%;
padding: 3px;
border: 1px solid;
}
http://jsfiddle.net/6AvMm/6/
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;
}
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>