I have the following HTML elements.
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
with the following style assign to it
.parent {
width: 100% !important;
max-width: 100%!important;
}
.child {
float: left;
padding: 8px 18px 1px 18px;
border: 1px solid #111;
width: 44%;
height: auto;
margin-left: 4px;
}
However, the children do not follow the width property of the container the keep on floating without breaking or moving to the next line
Related
I have a section with 2 rectangles inside a flex container. One of the rectangles simply has a margin-top: - 17%, which is ignored by Firefox. Is there any way to assign a percentage margin in Firefox? (the rectangle slides nicely when the window is resized vs doing nothing if I use pixels as a margin).
Here is a Codepen Example: https://codepen.io/SergiOca/pen/wdQYad
<div class="import-flex">
<div class="export-rectangle">
<h1> Asesoramiento. </h1>
<p>
Test
</p>
</div>
<div class="import-rectangle">
<h1> <span> Oportunidad. </span></h1>
<p>
Test
</p>
</div>
<img src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="" class="import-footer-image img-responsive">
</div>
.import-rectangle {
transition: ease-in-out 1s;
position: relative;
width: 471.7px;
height: 409px;
background-color: #454044;
box-shadow: 0 0 20px 20px rgba(44, 42, 44, 0.1);
z-index: 5;
color: white;
padding: 40px 50px;
margin-top: -17%;
}
.export-rectangle {
position: relative;
width: 471.7px;
height: 407px;
margin-right: 5%;
background-color: #c97c60;
z-index: 5;
color: #454044;
padding: 40px 50px;
}
.import-flex {
display: flex;
position: relative;
}
.import-footer-image {
width: 430px;
height: auto;
margin: 0 auto;
position: absolute;
top: 93%;
left: 30%;
z-index: 100;
}
Firefox has struggled with a bug when using percent for some time, bugzilla bug, so may I suggest you use viewport units instead.
margin-top: -17vw;
Updated codepen
If you need to adjust towards a parent element, CSS Calc might come to rescue if the parents size/position is somewhat fixed.
I have a section on a site that I have multiple image blocks. I have two columns with multiple rows. For some reason the margin and width are not being applied to these images. I have the following code in my media query for a viewport of 640px or less. Whenever you drag the corner of the page, the images do not scale in size at all. Also the left images stay in place instead of moving with the margin.
It is under the part called Site Sponsors in a viewport of 640px or less.
What is causing the images to not scale in height and width as well as the margin?
As you can see I have the images width defined in a percentage basis:
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
As well as the margin defined:
.sponsors {
width: 100%;
margin: 0 2.5%;
}
Does anyone see what I am doing wrong?
<div id="sponsor-left">
<div class="b_250">
<img src="images/Contractor Images/PMC spray foam equipment for sale.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Green Insulation Technology 300x200.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Spray foam rigs for sale a series.jpg">
</div>
</div>
<div id="sponsor-right">
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
</div>
.container {
width: 100%;
}
.content {
float: none;
text-align: center;
width: 100%;
}
/*----Second to Last Homepage Article---*/
#latestnews {
width: 100%;
text-align: center;
}
#latestnews .latestnews h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
}
#latestnews ul, #latestnews li{
text-align: center;
}
#latestnews li{
margin: 0 auto;
}
.latestnews img{
margin: 0 auto;
text-align: center;
}
#latestnews div.latestnews{
float:none;
width: 100%;
}
#latestnews p {
padding: 20px 10px;
clear: both;
}
#latestnews p.readmore{margin-top:10px; text-align:center;}
.column .sponsors {
width: 100%;
}
.column {
clear: both;
width: 100%;
margin: 0 auto;
}
.column .sponsors .b_250{
border: none;
}
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
.sponsors {
width: 100%;
margin: 0 2.5%;
}
.sponsors h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
text-align: center;
}
#sponsor-left {
float: left;
width: 45%;
}
#sponsor-right {
float: right;
width: 45%;
}
}
To center the ads, add this(although I prefer to avoid using ID's in selectors):
#sponsor-left a > img { margin: 0 auto; }
At which point you can then increase the width of the images to 100% to fill the width you declared for the left and right columns.
Also as I noted in the comments remove the float: right; and change to display: inline-block;
try display:block max-width:100%; height:auto;
for image to be center
You must use display:block or display:inline-block by default image is display:inline
How to center?
if your image is display:block use margin-left:auto; and margin-right:auto;
and for display:inline-block give text-align:center to image parent element
Note
Be care full your image css does not have float:left or float:right
I'm trying to make this tool tip's position
relative to the parent div
this is how I am implementing the web page:
<div id="parent">
<div id="chart">
<svg style="height:500px">
</svg>
</div>
</div>
with css:
#parent
{
margin-top:300px;
border: solid blue;
height: 600px;
}
#chart
{
border: solid red;
width:500px;
float:left;
height: 500px;
text-align: center;
font-weight: bold;
margin-bottom: 2em;
}
svg
{
width: 100%;
}
I found chartContainer in the nvd3.js file, but I couldn't edit it.
So are there possible solutions ?
In my asp.net mvc4 view I have some nested divs to show an image and under it a text like below:
<div id="Outer1" class="elementStatus">
<div class="image"> <!-- THIS IS THE IMAGE -->
<img id="MyImg1" src="#Url.Content("~/images/Image.gif")">
</div>
<div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
Statuts Text
</div>
</div>
and the css:
.elementStatus
{
visibility: hidden;
}
.image{
float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;
}
.text{
float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;
font-weight: bold;
font-size: 1em;
}
I want that the image in the first div to be centered horizontally and vertically in the div where it is placed. The same for the second div, I want the text to be centered horizontally and vertically within its div. So how to do it?
Please, do not downvote!
Recommend a background image:
.image {
background-image: url('~/images/Image.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 35px 35px;
}
For the text:
.text {
text-align: center;
}
For vertical text alignment:
.text {
line-height: 35px;
height: 35px;
}
This is a pretty broad question but it's easily solved using flexbox (assuming you're supporting newer browsers). Going to remove vendor prefixes for the sake of clarity but you'll want something like this:
#Outer1 {
display: box;
box-align: center;
box-orient: vertical;
box-pack: center;
}
http://jsfiddle.net/VqwLH/
Since you have updated saying you need support for older browsers, I think you can use display: table-cell for the parent container:
#Outer1 {
display: table-cell;
height: 500px;
width: 500px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/VqwLH/1/
html code:
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
css code:
.ank
{
display: block;
width: 500px;
height: 500px;
line-height: 100%;
}
img
{
vertical-align: middle;
}
.container
{
display:block;
width: 500px;
height: 500px;
border: 1px solid black;
font-size: 500px;
}
jsfiddle: http://jsfiddle.net/mfBZZ/5/
if i change the jsfiddle, so that anks line-height is 500px, and remove the font-size from container, it works.
but when i add the font-size to container of 500px, and then make the line-height in ank, 100% of that font-size, it doesn't work. it brings the image alittle lower than where it should be.
working jsfiddle: http://jsfiddle.net/eujFY/1/
UPDATE:
this solution works for me:
http://jsfiddle.net/eujFY/2/ <---- updated.
I've seen you found a solution, however it implies setting the height manually on both elements and it requires the usage of unnecessary tags.
So I suggest you to check the "display:table" (container) and "display:table-cell" (inner element) rules: http://jsfiddle.net/RxGS5/
HTML
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
CSS
.container
{
display:table;
width: 500px;
height: 500px;
border: 1px solid black;
}
.ank
{
display: table-cell;
vertical-align: middle;
}