Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I can't seem to manage to stretch the paragraph to it's parent div. Normally I thought this worked with width:100% and height:100%, and making it display:inline. But I'm probably missing something here. I did a Google search for my question (copy paste the title) and no result.
Fiddle: http://jsfiddle.net/QuantumHive/D8rUa/
So lets see what we have here:
HTML:
<div id="bday">
<div id="day">
<p class="value">16</p>
</div>
<div id="month">
<p class="value">december</p>
</div>
<div id="year">
<p class="value">1989</p>
</div>
</div>
CSS:
#bday {
width:220px;
height:220px;
border:solid 1px black;
overflow:hidden;
position:relative;
}
#bday div {
height:10%;
border:inherit;
float:left;
margin:5px 0px 0px 3px;
position:relative;
}
#day {
width:15%;
}
#month {
width:45%;
}
#year {
width:25%;
}
.value {
width:100%;
height:100%;
cursor:pointer;
display: block;
margin: 0;
background: red;
}
We need to get the <p> to display: block; and give it a height + width. Also take away the margin or it will flow out.
DEMO HERE
I think this is your answer:
.value {
padding:0;
margin:0;
height:100%;
}
Remove all other properties from .value and put these 2 only.
If i can understand it must be like: http://jsfiddle.net/D8rUa/2/
#bday {
width:220px;
height:220px;
border:solid 1px black;
overflow:hidden;
position:relative;
padding: 5px 0px;
}
#bday div {
height:100%;
border:inherit;
display:inline-block;
padding-left:3px;
float:left;
margin:0px 0px 0px 3px;
position:relative;
}
#day {
width:15%;
}
#month {
width:45%;
}
#year {
width:25%;
}
.value {
display:inline;
width:100%;
height:100%;
cursor:pointer;
position:relative;
}
I think what you are missing is clearfix. You need to put this piece of code in and add clearfix to your classname.
http://davidwalsh.name/css-clear-fix
add
p.value {
display:inline-block; /*ammended*/
margin:0;
width:100%;
height:100%;
cursor:pointer;
padding-bottom:1000px;/*optional */
margin-bottom:-1000px; /*optional */
border:1px solid #CCC;
}
demo
if you remove padding-left:3px; in #bday div, the left gap would disappear too!!
Related
This question already has answers here:
Break long word with CSS
(6 answers)
Closed 1 year ago.
So im building a website on which i have a messenger-box implemented. I want the overflow to force the div to expand its height to the bottom of the page.
For now it looks like this:
The html structure would be something like that:
<div class="chat">
<div class="message-box">
<div class="others-message">Wie gehts</div>
<div class="my-message"></div>
<div class="others-message"></div>
</div>
...
Here is my css code:
.chat{
grid-area:chat;
width:400px;
height:600px;
border-radius: 25px;
display:inline-block;
vertical-align:top;
}
.message-box{
display:inline-block;
clear:both;
overflow:auto;
position:relative;
width:360px;
height:75%;
margin:10px;
margin-top:60px;
border-radius:5px;
background-color:#f0ffff;
-webkit-box-shadow: 0px Opx 12px -2px #000000;
box-shadow: Opx Opx 12px -2px #000000;
}
.my-message{
position:relative;
text-align:left;
color:white;
background-color:blue;
border-radius:20px;
padding:10px;
margin:10px;
width:70%;
}
.others-message{
position:relative;
text-align:left;
color: white;
background-color:grey;
border-radius:20px;
padding:10px;
margin:10px;
margin-left:100px;
max-width:70%;
min-height:40px;
}
Use word-wrap: break-word on message class selectors.
The word-wrap property allows long words to be able to be broken and
wrap onto the next line.
You may try adding width and overflow properties to my-message and others-message classes in CSS.
I have something like
.padding-top {
10px;
}
.padding-upper {
1px;
}
<div class="padding-top padding-upper"></div>
Which will be prioritized? Is it random or is there a chronological order here?
I have tested the code and checked that there is only 1px applied, even if I try to interchange the order of the like so:
<div class="padding-upper padding-top"></div>
Only 1px is applied. Can someone enlighten me on this one?
Yes, it is applied by order. Try this because your classes are not defined properly (missing padding properties):
.padding-top {
padding-top: 10px;
}
.padding-upper {
padding-top: 1px;
}
div {
height: 100px;
background-color: red;
}
<div class="padding-top padding-upper"></div>
It will be applied by chronological order how you declared classes. Because you have padding-top class first declared it will be overwritten. It will be overwritten by class padding-upper which is declared after.
If you change the order of declaration, style of div element will be changed too. But if you change order in class attribute then style will remain same.
But if you have the situation that you want to keep original value you can achieve with !important for that property:
.padding-top {
padding-top: 10px !important;
}
.padding-upper {
padding-top: 1px;
}
Now order for padding-top property doesn't matter. 10px will be always applied because it is decorated with !important.
Actually, The css will overrides based on the specificity level. In the below snippet. div.padding-upper is more specific than others. For more info: https://www.w3.org/TR/CSS21/cascade.html
.padding-top {
padding:10px;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
div.padding-upper {
padding:100px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
But in your case, both selectors are in same level. So, the recent rule will be applied.
.padding-top {
padding:10px;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
If you want to override that above default behavior you have to use !important.
.padding-top {
padding:10px !important;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
Order does matter. The last declared value of multiple occurrence will be taken.
Css works the way it is written. So if you are taking two classes in your html:
<div class="padding-upper padding-top"></div>
The class which is written at last in the css:
.padding-top {
10px;
}
.padding-upper {
1px;
}
Will execute first no matter how you interchange them in your html.
Below is a simple example of the same-
.demo {
color: blue;
}
.demo1 {
color: red
}
.demo2 {
color: green
}
<div class="demo demo2 demo1 ">Hello World!!</div>
Switching from tables to divs for layout purposes sounds an attractive decision, yet it's very painful. I haven't still been able to use float and oveflow properly to get divs aligned properly. Here are I have the following html and css:
HTML
<div class="div-row">
<div id="divOfficers" class="div-column">DIVOFFICERS</div>
<div id="divTasks">DIVTASKS</div>
CSS
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
}
.div-column {
margin-right:3px;
float:left;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
}
Basically, I need the divTasks to stand right to the divOfficers, but without stretching over it. But here's what I get:
I've cleared the overflow in the parent div but as you can see that does not help. What else do I have to do?
just give a float:right to divtasks as well as you did float:left with divofficers. if it is what you want than your problem solved or let me know if you need something else to do and put your code on jsfiddle please as it will help a lot
Try use CSS3 code, If you use float maybe have problem with long content
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
display: table;
}
.div-column {
margin-right:3px;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
display: table-cell;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
display: table-cell;
}
Demo: http://jsfiddle.net/vsok/dqmdv7oa/
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 8 years ago.
I'm trying to create a hollow css arrow in front of an image.
I got it… but it feels very dirty. Is there any better way to do this?
Cross browser compatibility (IE8+) would be awesome.
SCSS
.arrowwrap {
width:100%;
padding:0;
position:relative;
overflow:hidden;
margin:-$arrow_height 0 0 0;
&:after {
content:'';
position:absolute;
height:$arrow_height;
width:50%;
margin:-$arrow_height 0 0 -$arrow_width;
left:0;
z-index:99999;
background:$box_color;
}
&:before {
content:'';
position:absolute;
height:$arrow_height;
width:100%;
left:50%;
margin:0 0 0 $arrow_width;
z-index:99999;
background:$box_color;
}
.arrowone {
width: 0;
height: 0;
border-style: solid;
border-width: $arrow_height $arrow_width 0 $arrow_width;
/* border-color: transparent transparent #333 transparent; */
border-color:transparent $box_color $box_color $box_color;
margin:auto;
}
}
http://jsfiddle.net/dhs2eba2/
If you want to minimise and remove all unsemantic markup you can do :
DEMO
This technique relies on pseudo elements and therefore prevents the use of unsemantic markup. Pseudo elements are supported by IE8+ see canIuse. It also needs the box-sizing property to enable responsive width (box-sizing: border-box is also supported by IE8+ see canIuse).
HTML :
<div class="wrap">
<img src="http://placekitten.com/800/350" />
<article>
<h1>Hellow World, meow</h1>
</article>
</div>
CSS :
body {
background:#fad;
padding:0;
margin:0;
}
$arrow_width: 20px;
$arrow_height: 20px;
$box_color: #d3d030;
.wrap {
img {
width:100%;
height:auto;
vertical-align:bottom;
}
article{
padding:20px;
background:$box_color;
color:#fff;
position:relative;
}
}
article:before, article:after{
content:'';
position:absolute;
width:50%;
bottom:100%;
box-sizing:border-box;
}
article:before{
left:0;
border-bottom:20px solid #D3D030;
border-right:20px solid transparent;
}
article:after{
right:0;
border-bottom:20px solid #D3D030;
border-left:20px solid transparent;
}
Not sure about IE8, haven't got a copy on my VM, but you could approach it like this instead of pseudo elements
<div class="arrowborder">
<div class="arrrowwrap arrowwrapleft"></div>
<div class="arrrowwrap arrowwrapright"></div>
</div>
.arrrowwrap {
box-sizing:border-box;
width:50%;
z-index:9999999;
float:left;
}
.arrowwrapleft {
border-right: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
.arrowwrapright {
border-left: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
http://jsfiddle.net/dhs2eba2/8/
The problem is that i have a form with different fields of different sizes. Each field is inside a div with float:left. And they distribute automaticlly in 2 columns. If they are all of the same height there is no problem but if not it happens the following:
The divs are selected in blue. I need that the last div for example goes up because if not i have a dead space there and in many other forms of my site. They are dinamic forms so i cant solve it manually. The placement must be automatic. I searched in Stack Overflow and in the internet but i couldnt find any solution.
Here is the Divs CSS
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
And the General CSS
#popup{
width:645px;
height:auto;
background-color:#e3e3e3;
border-style:solid;
border-width:1px;
border-radius:5px;
border-color:#afafaf;
padding:15px;
color:#4d4d4d;
}
#popup #titulo{
font-size:15px;
font-weight:bold;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#afafaf;
padding-bottom:10px;
}
#popup #form #input{
display:block;
width:289px;
margin-top:10px;
}
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
#popup #form .right{
float:right;
margin-right:25px;
}
#popup #form #input label{
font-size:12px;
font-weight:bold;
}
#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
font-size:12px;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
width:280px;
background-color:#f0f0f0;
}
#popup #form #input #foto{
width:191px;
height:87px;
background-image:url(images/img_background.png);
border-style:solid;
border-width:1px;
border-color:#afafaf;
border-radius:5px;
}
#popup #form input[type='button']{
text-align:center;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
font-size:12px;
color:#4d4d4d;
-moz-box-shadow: inset 1px 1px 1px #ffffff;
-webkit-box-shadow: inset 1px 1px 1px #ffffff;
box-shadow: inset 1px 1px 1px #ffffff;
}
#popup #form #input input[type='button']{
width:82px;
height:17px;
margin-left:4px;
line-height:14px;
}
#popup #form #submit_buttons{
text-align:right;
border-top-style:solid;
border-top-width:1px;
border-top-color:#afafaf;
padding-top:10px;
margin-top:15px;
}
#popup #form #submit_buttons input[type='button']{
width:82px;
height:30px;
}
#popup #form input[type='button']:hover{
background-color:#cccccc;
cursor:pointer;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#popup #form #input table{
width:284px;
margin-top:2px;
margin-bottom:5px;
}
#popup #form #input table tr{
text-align:right;
vertical-align:top;
}
#datepicker{
background-image:url(images/datepicker.png);
background-repeat:no-repeat;
background-position:right;
}
#popup #form #input textarea{
height:115px;
max-height:115px;
min-height:115px;
width:275px;
max-width:275px;
min-width:275px;
}
I'm providing a simplified version of the problem, but is simple enough to carry on to your example. You just need to alternate the float between left and right so they don't break :)
HTML Code:
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>
CSS Code:
.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}
Live example:
http://jsfiddle.net/h4kE8/
I would try throwing a position:relative; in with those two DIVs. I've found that any sort of positioning problem can usually be fixed by setting a clear position attribute.
Also helps when using position:absolute; to have it's parent's position set. If that doesn't work, don't underestimate tables. People might not like them much, but if you know how to use them, they work well for stuff like this.
Lengthy, but the best advice I can give.
The Multi-column Layout module spec has been around for a long time, but browsers have been slow to implement, so IE is almost definitely out (though there may be a polyfill that will help it limp along).
http://www.quirksmode.org/css/multicolumn.html
http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/
Note that this will change the order that your elements display, but it will eliminate the gap.
I would in your case have the id, nombre and descripcion sit in the same div, call it left div. Then have the rest of the content on the right sit on another div call it right div and have them both float left. as follows
css
.left {
float:left;
}
.right {
float:left;
}
HTML
<div id="left">
/*id, nombre and descripcion */
</div>
<div id="right">
/* the rest */
</div>