I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.
As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.
.container {
width: 600px;
height: 190px;
background-color: #ff7675;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#st-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
#nd-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
margin-left: 20px;
}
#rd-box {
float: right;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
<div class="container">
<div id="st-box">
<iframe></iframe>
</div>
<div id="nd-box">
<iframe></iframe>
</div>
<div id="rd-box">
<iframe></iframe>
</div>
</div>
What can I do?
You should style your iframes. Here is some code that will help you on your way.
iframe {
display: block;
width: 100%;
border: 0;
}
The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.
For example, you might want to give them:
border:0;
width:100%;
The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.
iframe { border: 0; }
Related
I've been looking for solutions everywhere but I can't understand how to separate the text from the iframe. Everything I tried did not work (for example, this answer).
This is a screenshot to have an idea:
this is the HTML (I used it very rarely in my life and never worked with containers before, so I'm sure the error is clearly visible to someone more skilled than me):
<div class="container">
<iframe src="link" width="500px" height="500px" align="left" style="border: 1px solid #ccc" frameborder=0></iframe>
<article>
<font face="calibri" size="30" style="background-color: powderblue;">title</font>
<h4></h4>
<font face="verdana">text</font>
</article>
</div>
This is the CSS (I was testing margin-left: 10px but 10 or 1000px won't change anything):
article {
margin-left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
I think you could solve it by setting position: relative; to your article tag. This way, you could then specify the position offset that you want it to have using the left property instead of using the margin-left property.
I mean:
article {
position: relative;
left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
If this is not exactly what you wanted, I also think that the position property, together with the left, right, top and bottom properties, seem quite suitable for your problem, so I suggest you should take a look of them.
HTML5 does not support those for iframe style, there is no way to set them through style sheet.
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I am trying to get a bottom border to work but it is not working as I want. When I create my border there is a small line below the border that is still the background. How can i fix this?
HTML:
<div class="bottomborder"></div>
CSS:
.bottomborder {
background-color: black;
width: auto;
height: auto;
height: 20px;
margin-left: -20px;
margin-right: -20px;
}
What Exactly you want?
Your information and code is not sufficient still Please see this Demo
.bottomborder
{
background-color: black;
width: auto;
height: auto;
height: 20px;
margin-left: -20px;
margin-right: -20px;
border-bottom:2px solid red;
}
<div class="bottomborder"></div>
Note: Your are not closing <div> properly
You could do it easily by inspecting element. Also the way Rawat suggested.
Have a look here:-
<div class="bottomborder" id="div1"></div>
CSS:-
.bottomborder {
background-color: black;
width: auto;
height: auto;
height: 20px;
margin-left: -30px;
margin-right: -30px;
border-bottom: 2px solid green;
}
See the Working demo here
Hope it helps
Just use border instead of background-color like this:
HTML:
<div class="bottomborder"></div>
CSS:
.bottomborder {
background-color: none;
width: auto;
margin-left: -20px;
margin-right: -20px;
border-bottom: 20px solid #000;
}
P.s. you specified two height properties of 20px as well as auto on the div.
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
I just want to make everything in the 'wrapper' stretch out to fit the wrapper, but everything is being annoying and staying a fixed height??
So I wanted the 'sidebar' and the 'inside' of the 'content' area to be the same height all of the time, and i also want the 'content' to stretch to fit the 'wrapper' at all time, while having a 'header', 'nav', and 'footer'. but nothing I try seems to work. I had it at one point but lost the code and forgot what I did.. help? :c
also I was playing around to see what would happen by changing the 'wrapper's min-height, that's why it is so low.
OKAY. to specify: for one, I want the 'wrapper' to encapsulate everything inside of it and always increase its height when one of the children increase their height, like with the 'inside' div is filled with text and increases the height of the 'content'
In addition, I also want the 'sidebar' and 'inside' to keep the same height, aka why they have a height of 100% or top; 0 bottom; 0 w/e i have on here.
Html:
#wrapper {
width: 1000px;
min-height: 300px;
background-color: red;
position: relative;
margin: auto;
margin-bottom: 10px;
border: 1px solid black;
}
#header {
width: 100%;
background-color: blue;
height: 100px;
float: left;
clear: both;
position: relative;
border-bottom: 1px solid black;
}
#content {
width: 100%;
background-color: grey;
height: 100%;
float: left;
clear: both;
position: relative;
}
#sidebar {
width: 180px;
background-color: green;
float: left;
position: absolute;
top: 0px;
bottom: 0px;
padding: 10px;
border-right: 1px solid black;
}
#inside {
width: 779px;
padding: 10px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
background-color: orange;
float: right;
}
#footer {
width: 100%;
height: 100px;
float: left;
clear: both;
background-color: pink;
border-top: 1px solid black;
}
#nav {
width: 100%;
border-bottom: 1px solid black;
float: left;
clear: both;
height: 20px;
background-color: purple;
}
<div id="wrapper">
<div id="header">
hi
</div>
<div id="nav">
hi
</div>
<div id="content">
<div id="sidebar">
sidebar stuff
</div>
<div id="inside">
inside stuff
</div>
</div>
<div id="footer">
hi
</div>
</div>
If I understand, you're looking for same height columns.
Check these two links:
http://css-tricks.com/fluid-width-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks