I have literally been trying every clearfix hack that I could find for hours and nothing is working. The paving photo at the bottom right always goes outside the content container. This is currently what I have:
.content {
margin: -10px auto 10px;
padding: 10px;
}
#paving_photo {
float: right;
margin: 10px 0 10px 10px;
border: 2px solid black;
width: 300px;
height: 300px;
}
.content:after {
content: "";
display: block;
height: 0;
clear: both;
}
This is the page: website template
I have tried the clearfix hack and micro hack. I have added the clearfix to the content class. I have tried overflow: hidden|auto. I have tried adding the clear: both after the floating element. Literally nothing as worked.
I'm at my wits end. Please help!
Thanks!
It seems fine on FF on my end, with the exception being when the screen height is less than about 791px. I think this is due to .outercontainer height is set to height:100%.
Related
Basically this is one question but might need a multi part answer to remove the excess spacing. Basically the problem occurs when setting the featured image on a post on the default twentysixteen theme. I have a live test environment setup to show this here: http://192.241.239.174/index.php/2016/11/02/hello-world/
Here is a shot of how it currently is vs what I'm expecting it to look like: http://prntscr.com/d204p5
Thank you for any help
Edit: Further researching similar questions I have gotten slightly closer by using some custom css to change the thumbnail/featured image max width to 150 which should be fine as all my featured images are going to be 150x150 anyways. This code was added into custom css:
.post-thumbnail img {
float: left;
margin: 5px 15px 10px 0;
max-width: 150px;
}
Now the text does appear slightly higher but still fails to wrap the thumbnail and is still not close enough to the thumbnail. I'd like to have the text closer to the thumbnail
EDIT: Complete solution
The complete solution I used was adding this code into my custom css:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100%;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
width:100%;
}
i don't think that's the better choice to make in fact i would have setup a child theme and worked on it, by the way:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100% !important;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
}
You may need to add !important keyword if something doesn't work.
The result: Is that like what you wanted?
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
I am not sure what i can do to fix it but I am unable to use css to align the images in 1 row and then another row like a gallery. Can anyone help. I have tried to float the div entry to left and still unable to get it correct.
here is the css for entry
.entry {
clear: both;
margin: 0;
padding-top: 1px;
}
Add
display:inline-block
to your div class .wp caption
See this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ as there may be some issues with Cross Browser but i think its only IE6, maybe 7
so in your case
.wp-caption {
border: 1px solid #a87c31;
text-align: center;
background-color: #10050B;
padding-top: 4px;
margin: 10px;
display: inline-block;
}
Ok, I have the following layout/CSS:
div#wrap {
margin-left: auto;
margin-right: auto;
position: relative;
width: 1400px;
}
div#header {
float: left;
margin: 50px 15px 0 50px;
width: 135px;
}
div#blog {
display: inline;
float: left;
margin: 50px 15px 0 50px;
width: 1080px;
}
div#site {
float: left;
width: 100%;
}
with:
<div id="site">
<div id="wrap">
<div id="header"></div>
<div id="blog"></div>
</div>
</div>
So, site covers window, 'wrap' is fixed width and is centered and 'header' and 'blog' are inside 'wrap' with defined width.
The problem is as usual with IE6. 'blog' is shown under the 'header'. So it seems that float and/or margin does not work.
It seems that it's not a double margin float bug, at least in DebugBar I see correct margins, but also there are some offsets (50px for header), which I don't know what it is, actually. Anyway, i tried to add 'display: inline' to both 'header' and 'blog', and it does not help.
I don't have ie7 to see, but it does show correctly in ie8.
I went through several tutorials on floating bugs for ie6, but could not find a solution for my problem (or i might have missed it).
Any ideas how to 'heal' it without adding extra div's (i hope it's possible with css, like with doublemargin bug)
p/s/ total width of divs with margin is 1345 < 1400.
EDIT1:
the only thing that is strange is 'wrap' has 0 height.
EDIT1: the only thing that is strange is 'wrap' has 0 height.
Please read http://www.quirksmode.org/css/clearing.html . However, the described issue doesn't appear in IE6 because of another bug; floats are automatically cleared.
Also, to prevent double-margin bug, make sure you define display:inline for all floating elements. Avoid adding display: inline to #wrap, it'll cause the previous issue (#blog appearing under #header).
edit: I was able to reproduce the issue at reznikdavydov.com. Inside #header, there is a <div class=menu> which has width: 300px set. The bug in IE6 causes that the wrapper (#header) is incorrectly expanded so that div.menu cannot overflow out of it. This is the reason why #header and #blog cannot fit side by side: the computed with of #header is 135px in modern browser, but 300px in IE6. The solution is to remove the width:300px rule from .menu selector.
it seems you have unneeded CSS, i would start from here and see if it works
div#wrap {
margin:0 auto;
width: 1400px;
}
div#header {
float: left;
margin: 50px 15px 0 50px;
width: 135px;
}
div#blog {
float: left;
margin: 50px 15px 0 50px;
width: 1080px;
}
div#site {
width: 100%;
}
My css looks like this
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
}
div#header {
background-color: #969696;
height: 80px;
}
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 10px 20px 10px 350px;
}
and my html
<div id="header">
</div>
<div id="mid-bar">
<div id="searchbox">
</div>
</div>
you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div... and not from header div.
I's a known bug: would use padding instead of margin. so:
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
padding-top: 10px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 0px 20px 10px 350px;
}
Give padding to #mid-bar instead of searchbox margin
I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.
See your example here with paddings: http://jsbin.com/ememi3
If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.
Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.