I have div at the bottom of another element, it is set to
.div {
display:none;
}
until the screen width is below a certain amount. Then I use
#media(max-width:805px){
.div {
display:initial;
}
than I have what the image shows. I do not understand what is going on.image showcasing problem
I do not know what is the problem and probably have spent an hour trying to figure it out. Any suggestions will be appreciated!
Try:
#media(max-width:805px){
.div {
display: block;
}
Related
I am trying to adjust an image which sits just before the text. But the problem is that the image width takes some space to the right because of the alphabet style A.
I have created a demo:
h1:before{
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}
<h1>pple</h1>
JSFiddle: http://jsfiddle.net/squidraj/wott37vy/
How can I reduce the space between A and p so that even I resize the browser it stays at the same place?
Any help is highly welcomed. Thanks in advance.
One clean way to solve this would be to set the pseudoelement's display to inline-block, and give it a defined width.
Here is a Live Demo:
h1:before{
display: inline-block;
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
width: 90px;
}
<h1>pple</h1>
JSFiddle Version: http://jsfiddle.net/wott37vy/3/
You can use negative margin values to take away space.
h1:before{
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}
h1 span {
margin-left: -20px;
}
<h1><span>pple</span></h1>
I would wrap your logo in a div:
<div><h1>pple</h1></div>
And then give that div a fixed width so that it does not resize by itself:
div {
width: 180px;
}
This might not be the prettiest solution but you can add a negative margin to the right side of your image to bring the text closer like so,
h1:before {
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
margin:0 -20px 0 0;
padding:0;
}
See Below for the Self-contained Example
Pictures of what I am trying to do, and what I actually get:
I want to create css rules so that my content looks like this (correct):
I am struggling to find a simple solution online, so my content looks like this (wrong):
Summary of what I'm trying to achieve:
I couldn't find a solution on stackoverflow or any css blog which provided solutions to similar but incompatible problems.
I have two floated divs, left and right on a row div. The left div contains an image that stretches out until it is the width of the left div. The left div's height is dependent on the img it contains. This is the height that I want the right div to conform to. I need this conformity so that when there is no more room on the right div, the overflow:hidden code will hide the excess text.
Fixed heights are not allowed. I am trying to avoid Java Script for this. Is there a solution in pure CSS?
CSS snippet
.left {
float:left;
width:50%
}
.right {
float:right;
width:50%;
background-color:darkgrey;
overflow:hidden;
}
img {
min-width:100%;
height: auto;
width: 100%;
}
As you can see, I don't have any code here to handle equal div heights because all the solutions I've tried have not worked.
Here is my jsfiddle so you can see the problem:
http://jsfiddle.net/1upodwg9/
To use overflow: hidden; the container would need a defined height, otherwise it doesn't know where the overflow begin. Since you want to have a dynamic image (with different heights) I'm afraid you have to use javascript.
Fiddle
http://jsfiddle.net/1upodwg9/14/
.child-row {
display:block;//added
background:red;
}
.left {
float:left;
width:50%;
height:100%;//added
display:inline-block;//added
}
.right {
width:50%;
background-color:darkgrey;
display: inline-block;//added
}
Fiddle example when you have more content
http://jsfiddle.net/1upodwg9/15/
Something like this fiddle ?
$(window).resize(function () {
var height = $("#leftDiv").css("height")
$("#rightDiv").css("height", height);
});
If you're only catering to IE8+ and/or modern browsers you can use display: table, display: table-row, display: table-cell
.parent {
margin: auto; /* helps place in middle */
width: 70%;
display: table;
}
.child-row {
display: table-row;
}
.child-col {
display: table-cell;
vertical-align: top;
}
Example: http://jsfiddle.net/1upodwg9/16/
(Sorry, I changed the image cos for some reason it wasnt loading on my end)
EDIT: Actually, it doesn't work for when the image is too small (the right col will set the height)
My JSFiddle:
http://jsfiddle.net/3YGdL/
My CSS:
#sidebar {
width: 100%;
background-color: blue;
}
#sidebar div {
width: 33%;
display: inline-block;
}
#sidebar-left {
background-color: green;
}
#sidebar-center {
background-color: red;
}
#sidebar-right {
background-color: yellow;
}
#sidebar li {
list-style: none;
}
My Question:
I want the 3 columns in one line with exactly the same width and aligned top. The content of those 3 columns should be dynamic, this means, the height should automatic change to the max height. We never know which of the 3 columns is the highest one, so this should be dynamic too.
My current solution is in the JSFiddle, I've tried other stuff like "display: table" but this was even worse...
I've tried this, but it didn't work for me...
Here is pure CSS solution
The HTML sturcture is the same, only i altered few lines in your CSS. I assigned #sidebar display to table.
Then, assigned #sidebar>div to display as the table-cell for equal height to all columns. For improving form UI i added this code
div.form-group input, div.form-group textarea {
clear:both !important;
float:none;
margin:5px;
display:block;
}
For futher details refer this URL
Hope this will be useful
Here is a solution with a simple jQuery Script: Example
First I gave every section a class .column to target them more easily.
Then I get the height of every element, and apply the highest height to all of them.
heightArrayHeading = [];
$('.column').each(function() {
$(this).css('height', '');
heightArrayHeading.push($(this).outerHeight());
});
$('.column').css('height', Math.max.apply(Math, heightArrayHeading));
Finally I gave .column vertical-align:top; to align them on top.
is this what you looking for?
JSFIDDLE
please remember that display:inline-block by default is baseline so you have to set it vertical-align:top, plus inline-block create whitespaces, you can see solutions for that here:
INLINE-BLOCK FIXES
UPDATE
now that i read carefully your question I understand you want same height for 3 columns, so I give you a link with some methods to achieve that:
Fluid Width Equal Height Columns
Hope it helps!
I am having some difficulty getting this inline-block div to center align properly as the two elements above it do.
The div which I am referring specifically to is the one which contains the three "social" icons at the bottom section underneath 'Interact with me' (please see here)
I assume that it is the float on the icons that is throwing it off whack which is why I have the wrapper div around it (.interact-social) to try to offset it, but it doesn't seem to be working as it should...? have already spent the better part of the day just trying to figure it out, to no avail.. :(
Any assistance greatly appreciated as usual, thanks!
edit:
Here was the relevant code for anyone interested:
.social {
height: 50px;
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
was simply missing a width declaration (which I had unsuccessfully tried apply to other divs)!
Add this to your code:
.social
{
width:240px;
}
Try making these changes to your css:
.interact {
width:95%;
}
.social li {
float:left;
}
.interact-social {
/*width:30%; Remove this width */
}
this is the layout I'm working with. what I'm trying to achieve is that as the window is collapsed I want the div on the right to collapse allowing the inner elements to be pushed down.
my css is as follows:
#left-div {
display: block;
float: left;
}
#right-div {
display: block;
float: left;
}
#right-div elements {
display: inline-block;
}
I basically want to achieve what's going on in the last photo without the right div getting moved down first. any ideas?
Edited to remove pictures as I've come to an answer and I'm not sure if I was supposed to post them.
After taking various stabs at it, appears that JavaScript/jQuery may be your only solution...