I applied a custom container to a WordPress Categories template file, set the width to 50%, floated it left, but after the third instance occurs, the layout breaks from what is expected.
I've tried changing the display types, checked for re-occurrence on other browsers(It occurs in both Chrome and Mozilla Firefox). I've also tried applying a clearfix to the container.
.clearfix::after {
content: "";
clear: both;
display: table;
}
.category .post-block {
width: 50%;
padding: 1em;
float: left;
}
https://imgur.com/a/JtdcN3L (Not enough rep for posting images directly yet)
The location of the problem observed:
https://streamershaven.blog/category/hardware/
You have to consider padding, margin and border as part of total element width.
"content-box" box model:
"Total element width = width + left padding + right padding + left border + right border + left margin + right margin"
The CSS Box Model
Solved by using the flexbox model outlined https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Have a fallback for no browser support in place.
Related
i'm with a trouble in relation with treatment of image, using intervention image on laravel. The problem is: I have to change aspect ratio of a image, but, in my current way, i'm cropping the image to do it, and important things in this element is being cropped too. So, i was wondering, is it possible add border around on image to create the aspect ratio? If you all would can help me, i'll would be very glad with that.
P.S. Sorry for my english, i'm still learning, haha.
Solution 1
Create a div with the right aspect ratio/dimensions and load the image as a background image with background-size: contain.
div {width: 300px; max-width: 100%;}
div > div {
width: 100%;
padding-bottom: 60%; /* use this for the aspect ratio */
background: black url('http://jekyllcodex.org/uploads/grumpycat2.jpg') center center no-repeat;
background-size: contain;
}
<div><div></div></div>
Working demo: https://codepen.io/anon/pen/ooBaKe
How it works
The padding bottom creates the height for this div (as it has no content). The padding-bottom percentage is the percentage of the width of the parent. Thus, a 2:1 ratio image has a padding-bottom of 50%. A 3:2 ratio image has a padding-bottom of 66.66%.
Why this works
The div inside this div has a width of 100%. This is 300px, as the child div is constrained by its parent. The padding bottom percentage is relative to containing block, and not (as many people think) to the body. Here the containing block is the nearest block-level ancestor, which is the parent element. Note that it would be relative to the body if we used just one div with a fixed width of 300px.
Why this solution is not perfect
This solution is fully responsive, due to the max-width of 100% on the containing div. And if you change your mind and you want images to be cropped instead of contained, you only need to change the background-size to 'cover'. Therefore this looks like a good solution. However, a background images is not a proper image, as it has no 'alt' text and lacks a DOM representation, resulting in all kinds of accessibility problems.
Solution 2
Create a div with the right aspect ratio/dimensions and load the image as img tag with max-width and max-height.
HTML
div {
width: 300px;
max-width: 100%;
position: relative;
}
div > div {
width: 100%;
padding-bottom: 110%; /* use this for the aspect ratio */
background: black;
}
div > div > img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<div>
<img src="http://jekyllcodex.org/uploads/grumpycat2.jpg" />
</div>
</div>
Working demo: https://codepen.io/anon/pen/yPgQKJ
About this solution
It works roughly in the same way as the previous one, but this solution is semantically correct. The difference here is that an image element is positioned absolute in the inner div. Its placement is absolute, but relative to its parent at 50% of the left border and 50% of the top. Then the image placement is corrected for its width and height, using the translate function of CSS (otherwise its top left corner would be in the middle of its parent). Because only max-width and max-height are used (and not width and height), the image stays responsive and keeps its aspect ratio.
When using Chrome on PC and refreshing our page, sometimes the two paragraph text area where it says "Small Business Finance Team doesn’t stop advocating for its clients..." will ignore its parent div's 580px width rule and display behind the form on the right.
I'm not sure if this is because of the mobile responsive design or the div placement, but it's very strange due to Firebug displaying 580px whether the text is inside or outside the 580px width. The width value is never crossed out to indicate that the rule isn't being used.
Adding different !important rules, paddings, margins and commenting out the mobile area doesn't seem to fix the issue.
Website: http://smallbusinessfinanceteam.com/gold
Example image: http://i.imgur.com/VDNHmG5.png
Try removing the width: 580px property and just keeping the max-width: 580px property on the .left class.
.left {
max-width: 580px;
float: left;
padding-right: 30px;
overflow: auto;
}
How can I center my image in white space?
I am using HTML, PHP or CSS. I am not sure of the best approach, but that is what I have involved so far.
I only saw how to align an image within text on w3schools.com. My other attempts, such as:
#image {
margin-left: auto;
margin-right: auto;
}
only make the image disappear.
<img> is not block level tag (its inline level tag ) . So you have two choices in css . one is Using : display:inline-block and then giving margin : 0 auto , which is used when you are adding more than one image in a line .
second is do the same about margin but this time , use display:block; ;
I wish this could help .
The standard way to horizontally center an image (or any element) in CSS is:
img {margin:0 auto;)
This is the short version of:
img (margin:0 auto 0 auto;}
which, in turn, is shorthand for:
img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}
=====
If the standard method above does not work (perhaps because of conflicting CSS elsewhere in the stylesheet?), there is an alternative way to horizontally center an image (or any element) in CSS IF you know the width of the element.
Assuming the width of the <img> is 100px:
img {position:relative; left:50%; margin-left:-50px;}
It works because:
1) with margin-left:-50px; you are telling the browser to consider the left-hand margin of the element as being exactly in the middle of the 100px-width element
2) with left:50%; you are telling the browser to position the left-hand margin of the element exactly in the middle of the element's parent
And so, of course, when you place the middle of the element in the middle of the element's parent, you have succeeded in horizontally centering the element.
=====
If you are styling for contemporary browsers, you can use the Flexible Box Layout module from CSS3:
img {display:flex; justify-content:center;}
first way
set margins to 50% on both sites
#image {
margin-left: 50%;
margin-right: 50%;
}
this should center your html-object.
second way
sometimes this doesn't work for me, so i use the deprecated tag <center>.
<center>
<img src="/img.png" alt="blubb">
</center>
< div style="margin:0 auto" >
....image...
< /div >
If you want it center of the page add width:100%
Hi There is problem that i am facing in only in one post of the wordpress.The image that is inside a tag in tag is coming bigger than the actual size of the div. because of this user is not able to differentiate between to different post.please check the image
here is the link where you can check.
Link
The image is floating left so it's parent DIV ".entry-summary" needs to expand to accomodate the floating element.
To do this you need to add "overflow: hidden" to ".entry-summary".
.entry-summary {
overflow: hidden;
}
you could try:
#div img{min-width:100%;height:auto}
This will keep the aspect ratio, unless ofcourse you want to cut if off with the overflow
You can add a float: left to the content, like below:
.entry-content, .entry-summary {
margin: 1.5em 0 0 0;
text-align: justify;
width: 735px;
float: left;
}
This will cause the div to stretch around all of its contents :)
So I have a div that I want to be:
100% width (of viewport) - 150px
How would I show this in CSS or Javascript?
Container of your div must be position:relative (or absolute...but not default), and div style must be like this:
position:relative;
width:auto;
margin:0px 150px 0px 0px;
You can use jQuery $(window) selector to get the viewport width and change the width of the div you want
var width = $(window).width();
$("div").css("width", width-150);
You may want to go look up the CSS style
box-sizing: border-box;
Normally, the 100% is calculated for the size of the insides, which is utterly useless if your box contains any sort of padding or border whatsoever. With box-sizing, it is calculated for the outside of the border to be that size. Incredibly useful for making % sized divs with non-zero padding and border line up properly.
Heres everything put together...
http://toomanyprojects.weare88.com/uploads/fixed-col-fluid-col/