I have a html like this: The idea is that divs are floated left and when there are more than 3 divs. The next one shoud start at the next line. (Because of the width). This works in almost all the browsers. Even in IE6. But when it comes to IE7. It puts the 4th div on the same line.
Any ideas why?
<div id="content">
<div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
</div>
</div>
And the css:
#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
}
Here are some pictures:
Any ideas why?
IE7
IE7 http://www.suaygiri.com/temp/ie7.jpg
IE8
IE8 The Correct One http://www.suaygiri.com/temp/ie8.jpg
try position:relative and display:inline; to .picture
also all the containers have to have fixed widths
if that doesn't work then you have something else going on
#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
width:960px;
}
.picture{
float:left;
width:320px;
position:relative;
display:inline;
}
edit: I didn't notice the extra div.... shouldn't cause a problem though.
Looked at your page -- this may or may not be the problem, but I notice you don't have a legal DOCTYPE. Try fixing that first.
My bad -- I was looking at the Chrome inspector not the source. The DOCTYPE looks fine.
Have you tried to remove the overflow:hidden; property?
I've tried in Safari, and removing the overflow:hidden; does not seem to change the layout
( don't have IE7 here so I can't really test it )
Related
I'm using the Bulma grid framework to customize part of the interface for our Learning Management System. I have a simple vertical nav (1 column on larger screens) on the left and then there is a large promo banner in the middle (8 columns wide on larger screens) with a smaller promo banner to the right (3 columns wide on larger screens). I have it setup so that all three items show on desktop-sized screens, and then at slightly smaller breakpoints I have it so that only the nav and the large promo show, and then on mobile I have it so that only the nav shows.
The issue I'm having is that I can't get the height of the smaller promo banner on the right to match that of the main promo. I've tried adjusting the dimensions of the image placeholder so that it's not square (like it currently is) and no matter what I do it's either slightly shorter or slightly taller than the main promo. I need them to be the same height when both are in view.
Originally I had it setup so that the images stayed a static size and were just "cropped" as they shifted using
object-fit:cover;
but that doesn't work IE11 which unfortunately is a requirement (and is also not ideal since these images will be promo banners and parts would be getting cut off)....so that's why I'm trying to figure this way out to have them resize appropriately.
Here is a JSFiddle so you can see what I mean: http://jsfiddle.net/markb088/zpfbc7y3/5/
Here's the code from the JSFiddle in-case it becomes unavailable:
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
#media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
#media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
#media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
*Note that you'll need to expand the results panel and your browser wide enough so that the smaller promo banner shows. Majority of the CSS is included in the head tags of the html, due to the restrictions of the LMS.
I'm not overly familiar with grid systems, so not sure if I'm missing something to make it show with a matching height but still be responsive.
Thanks!
If you have the option to add the image as a background, you can use the following CSS:
.column {
background-size:cover;
}
It will also work with IE11.
The other option which will distort your image aspect ratio is to set a min-height value to the image:
.respImg {
min-height: 300px;
}
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
I am trying to work out the best way for me to center each of my pictures (#contact1, #contact2, #contact3) inside each of their containers. I have tried to put margin left etc but doesnt work for when I scale up.
I have a JSFiddle I have started: http://jsfiddle.net/tJugd/3592/
HTML:
<div class="slide" style="height:66px;">
<div class="staff staff-matt" data-hammer="[object Object]">
<div id="contact1"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-shail" data-hammer="[object Object]">
<div id="contact2"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-leah" data-hammer="[object Object]">
<div id="contact3"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
</div>
CSS: (View all on JSFiddle)
#contact1, #contact2, #contact3{
position:relative;
background-color:white;
width:100%;
height:66px;
}
You will need to make you images display block and add margin 0 auto to it
#contact1 img, #contact2 img, #contact3 img{
margin: 0px auto;
display:block;
}
Try:
margin-left: auto;
margin-right: auto;
This makes your image have an equal margin on both sides, and usually works with most divs and images.
Try with adding the attribute text-align: center; to staff class.
HTML/CSS newbie question for you.
I've been stuck on this for awhile. I'm looking to center my image gallery AND also make the padding between the images tighter. I'm thinking I need a container but, I've just been screwing it all up when I try. Any help would be great!
<div id="container" align="center">
<div class="img">
<a href="#">
<img src="#" alt="PIcture1" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture3" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture4" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
</div>
CSS:
#container{
}
div.img
{
margin:5px;
padding: 5px;
border:none;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:none;
}
div.img a:hover img
{
border:none;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
It depends on how you want to centre your gallery.
There's a few things that you need to bear in mind. In order to centralise some HTML you need to have a set width of the centralising element.
Here's some code for you to work with:
Create a "centre" class in CSS as follows:
div.centre{
margin:0px auto;
width:800px;
}
Then add it to your container as follows:
<div id="container" class="centre">
The secret to centralisation is in the margin:0px auto;, this is convention of modern web development to centralise content.
Have a look at this code
p.s. don't use align="center" it is depreciated in later versions of HTML. Better to not get into the habit of using it and stick to using CSS classes to centralising things for you.
You should not use align. It is a deprecated property. To center something with a container you need to specify a fixed width and add margin auto.
Ex:
#container {
width:970px;
margin: 0 auto;
}
You can remove the padding on div.img
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form