https://www.opheliajewellery.co.uk/about/
On this page there's a margin on the bottom and right of each div in the middle, The top and middle have the right size between eachother but the bottom and middle has a slightly larger gap,
After using the inspector I can't seem to find the cause, It's not actually a margin, it's just white space.
It works find on my localhost, but as soon as I put the code into wordpress it does this.
Here's some of the css and the html.
.ophelia-shortDiv{
width: 37%;
margin-bottom: 1%;
display: inline-block;
}
.ophelia-aboutText{
margin-top: 15%;
margin-bottom: 15%;
margin-left: 10%;
margin-right: 10%;
}
.ophelia-wideDiv{
width: 62%;
margin-bottom: 1%;
min-height: 345px;
display: inline-block;
}
.cover{
background-size: cover;
}
.ophelia-leftDiv{
float: left;
margin-right: 1%;
}
.ophelia-color1{
background-color: #e7e7e7;
}
.ophelia-color2{
background-color: #c5c6cd;
}
.ophelia-color3{
background-color: #ced6d8;
}
.ophelia-aboutMain{
margin-bottom: 5%;
margin-top: 5%;
}
<div class="ophelia-aboutMain">
<div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>
<div class="ophelia-shortDiv ophelia-color1">
<div class="ophelia-aboutText">
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="ophelia-wideDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>
<div class="ophelia-shortDiv ophelia-color1 ophelia-leftDiv">
<div class="ophelia-aboutText">
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageThree.jpg) no-repeat; background-size:cover"></div>
<div class="ophelia-shortDiv ophelia-color3">
<div class="ophelia-aboutText">
<p>
...
</p>
<p>
...
</p>
</div>
</div>
</div>
Changing 'inline-block' to 'inline-flex' on the divs fixed the problem.
There is a fiddle below to show an example of the problem
Your gap between your elements is caused by this css rule you have:
.kleanity-body, .kleanity-body p, .kleanity-line-height, .gdlr-core-line-height {
line-height: 1.7;
}
Your are applying line-height to many different elements including the body of your html.
remove this rule and apply the line-height only where you need it.
I put this into a fiddle, and indeed the margin issue is there. This has nothing to do with any styles applied to body, since it appears without any other context (though changes there might well have the desired effect).
I am not sure what is causing this, but it seems that if the image above is removed, the issue disappears, and also if the middle image has float:right - so I suspect this is something to do with the float:left in your ophelia-leftDiv class.
Related
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
After thoroughly researching for the way to fix this I have still not found the answer I seek. I finally decide to post my problem on stackoverflow.com because I finally give up trying to find the answer. What I get as a result is two boxes with content on top and one box on the bottom.
Here is the CSS code:
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
Here is the HTML Code:
<div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
The problem is your padding, as mentioned above.
Here is a fiddle with the padding removed and colours added: http://jsfiddle.net/gj0wmgym
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
}
The problem with your code is that your .box class assigns a width of 33%, with additional padding. This leads to a total width of more than 100%. Padding is added to the .box's initial width because that's how the default box model works in CSS.
To fix this problem, add this line to the .box's style declarations:
box-sizing: border-box;
You can see a live demo here. If you want to learn more about the box model, this article by Chris Coyier is an excellent reference.
From what I can tell, your floats are working correctly.
Your html was missing the id attribute, so make sure to add that to your html.
What you are probably expecting is for the floats to not wrap to the next line, which is because the padding gets added to the width size (the elements are greater than 33%). You instead need to set the box sizing attribute see this article
* {
box-sizing:border-box;
}
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
<div id="content_area">
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
I need inner_holder to have width of 960px and I need it to be centered. I tried using width: 960px and margin: 0px auto but it doesn't work. How can I center the divs inside inner_holder?
HTML:
<div class="parent_container">
<div class="inner_holder">
<div class="column column1">
<div class="inner_clip"></div>
</div>
<div class="column column2">
<div class="inner_clip"></div>
</div>
<div class="column column3">
<div class="inner_clip"></div>
</div>
</div>
</div>
CSS:
.parent_container {
height: auto;
margin: 15px auto;
min-height: 500px;
width: 960px;
}
.column {
float: left;
margin-right: 50px;
}
.inner_clip {
background-color: #333333;
height: 250px;
margin-bottom: 20px;
width: 250px;
}
As you can see here the "div that contains floated elements" is actually in the center (red).
I am assuming you want to center the floating elements themselves, not their parent. I'm afraid you can't do that (as far as I know). But in case you are not depending on your elements actually floating, you propably just want to display your .colum as inline-block with an text-align:center set to the parent.
Changes to your CSS:
.parent_container {
text-align:center; // added
}
.column {
display: inline-block; // added
margin: 0 25px; // added
float: left; // removed
margin-right: 50px; // removed
}
Result as Fiddle
I beat my head trying to figure this out forever.
The answer above about assigning "display:inline-block" to the elements in the div, and then assigning "text-align: center" to the parent div works
BUT BUT BUT... I had a class of "clearfix" on my parent div that apparently was mucking the whole thing up. As soon as I removed that clearfix class everything centered nicely (after hours of futile frustration, of course;).
Hope this helps someone.
I'm reworking a layout currently using tables for a two-column design, and ran into some problems.
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="leftcol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#leftCol
{
margin-right: 10px;
width: 49%;
float: left;
}
#rightCol
{
width: 49%;
float: left;
}
Originally I had a two-columned table with width=100% - this worked perfectly in Firefox, but in IE the table overflowed the #frame div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.
All of my content resides inside the div #frame, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page).
I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both width: 50%, but this fails because the container they are in (#frame) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.
Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the #frame container.
I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?
Setting each column to 50% should work, if you make sure they don't have any margins or paddings.
If they need padding, put in an extra wrapper div, that can have as much padding/margins as neccesary.
For the gutter in between, you could give these wrapper divs a border on left/right side to make it look like a space in between the columns.
Posting a full code example (on jsbin.com for example) would also help us understand your problem more easily. :)
I think you might benefit from a css framework like 960gs or blueprint css it allows absolute grid placement and is cross browser compatible out of the box.
http://www.blueprintcss.org/
http://960.gs/
If you know the width of the frame, you can do this
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 245px;
float: left;
background-color: red;
}
#rightCol
{
width: 245px;
float: right;
background-color: blue;
}
<div id="frame">
<div id="leftCol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
Otherwise, an add an extra div, and do this
<div id="frame">
<div id="leftCol">
<div id="hack">
<div id="1">blah</div>
</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 50%;
float: left;
}
#hack {
margin-right: 10px;
background-color: red;
}
#rightCol
{
width: 50%;
float: right;
background-color: blue;
}
Ok here you go. This is how it can be achieved.
CSS
#leftCol, #rightCol{
width: 48%;
float: left;
background: red;
box-sizing: border-box;
}
#leftCol{
margin-right: 1%;
}
#rightCol{
margin-left: 1%;
}
HTML
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
If you need here is the vendor prefix for box-sizing.
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Note that you have typo in your HTML wher both div are called #leftCol. There is no#rightCol.