I've used the answer given by Arve Systad (3th answer: flow 2 columns of text automatically with css), to build the following example (part of a bigger file):
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 100%;
margin: 0 auto;
}
div#container p {
text-align: left;
float: left;
width: 25.3%;
margin: 2%;
padding: 0px 2% 10px 2%;
height: 500px;
background-color: yellow;
}
.columnh2 {
line-height: 200%;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<p><span class="columnh2">Title of a text</span><br />
A few lines of text<img src="example.png" border="0" width="81" height="80" /></p>
<p><span class="columnh2">Title of 2nd text</span><br />
More text with a different subject</p>
<p><span class="columnh2">Title of 3th text</span><br />
And more text with yet another subject</p>
</div>
</body>
</html>
There is an image in the first column (and there will be in the 2nd and 3rd columns), but it is not positioned the correct way at the moment. I've included a picture of how I would want it, but I can't get it to work with CSS.
How can i fix it?
Give the image this style:
img {
display: block;
margin: 32px auto;
}
Check the fiddle: https://jsfiddle.net/nnKU9/
#container {
width: 100%;
margin: 0 auto;
}
div#container p {
text-align: left;
float: left;
width: 25.3%;
margin: 2%;
padding: 0px 2% 10px 2%;
height: 500px;
background-color: yellow;
}
.columnh2 {
line-height: 200%;
font-weight: bold;
}
img {
display: block;
margin: 32px auto;
}
<div id="container">
<p><span class="columnh2">Title of a text</span><br /> A few lines of text<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
<p><span class="columnh2">Title of 2nd text</span><br /> More text with a different subject<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
<p><span class="columnh2">Title of 3th text</span><br /> And more text with yet another subject<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
</div>
Update:
If you want the images to stick to the bottom (because of unbalanced text), then you need to position the elements. Provide position:relative to the p and position:absolute to the img.
Check this updated fiddle: http://jsfiddle.net/nnKU9/1/
div#container p {
position: relative;
...
}
img {
position: absolute;
bottom: 0px;
left: 25%;
...
}
Hope that helps.
Maybe like that? http://jsfiddle.net/dPUmZ/169/ of course this is an example. If it works you will need to apply it better.
$(document).ready(function () {
var size = $("#data > p").size();
$(".Column1 > p").each(function (index) {
if (index >= size / 2) {
$(this).appendTo("#Column2");
}
});
$(".Column1, #Column2").append("<img src='http://placekitten.com/50/50'>") });
http://jsbin.com/IfobojAt/2/edit?html,css,output
you can try this. Using float and display property.
Related
I've got a problem with my HW. I cant align 2 elements on the left side https://jsfiddle.net/tkjxLfjy/ This is the code and i tried things like float:left but didn't work... So can you help me to put the meter and the text under the picture (the black sqare)?
According to w3school:
Elements after a floating element will flow around it. To avoid this,
use the clear property.
Add Clear:both to the div. The image has float:left so the next elements sit behind that.
Jsfiddle
figure div
{
clear: both;
}
You can remove float:left and add display: block to the image
Basically display: block reserve the whole line for the element, so that no other element set beside it, unless it's positioned.
Here is a fiddle
You should try like like this-
.clr{
clear:both
}
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
}
.header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
figure{
float: left;
}
img {
width: 150px;
height: 150px;
background: black;
}
meter {
width: 90px;
}
.meter-col{
float: left;
}
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
</figure>
<div class="meter-col">
<div>Profile completed: 60%</div>
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
<div class="clr"></div>
</div>
May it will helps you.
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<div>
Profile completed: 60%
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
</figure>
</div>
No need of other changing 'cause the tag has a default "block" behavior.
I changed a few things around. I also updated a few things to HTML5 (preferred). I changed everything to display block and changed the div that all of that lives in to float: left. JS fiddle link below.
https://jsfiddle.net/tkjxLfjy/6/
HTML:
<body>
<div id="container">
<header>
<h2>Profile</h2>
</header>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<label for="meter">Profile completed: 60%</label>
<meter name="meter" value="60" min="0" max="100">2 out of 10</meter>
</figure>
</div>
</body>
CSS:
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
float: left;
}
header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
img {
width: 150px;
height: 150px;
background: black;
display: block;
}
meter {
float: left;
width: 90px;
}
im putting images on the screen (just little circles) and every time I press a button 10 more pop up. This is what is happening:
It goes underneath the previous one.
This is what I want to happen:
my CSS thus far:
.numbers {
position: relative;
margin-top: 20px;
padding: 0;
}
.num p {
color: #877000;
position: absolute;
margin: 0 auto;
font-size: 16.5px;
margin-top: 5px;
margin-right: 6px;
margin-left: 6px;
float: left;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
}
.numbers num img {
position: relative;
}
.userNumbers {
position: relative;
}
the HTML:
<div class="userNumbers">
<div class="numbers">
<div class="num"> <p> 1 </p><img src="pic.png"></div>
<!--to 10-->
</div>
</div>
How, using CSS, can I change it to go next to each other? The images are inside a div with a class. :)
basically every time the div 'numbers' is called I want to add 32px the the left of it.. not go under it. Im calling it with JavaScript btw, but that is unrelated.
I'd put the 10 first images inside a div with a property:
display: inline-block;
Then just duplicate the div with the images and it should fine.
For example,
<div style="display: inline-block;">
<img id="img1" />
...
<img id="img10" />
</div>
<div style="display: inline-block;">
<img id="img11" />
...
<img id="img20" />
</div>
I would choose this kind of approach with display flex to dinamically add new columns. Remember that <p> height should be 1/10 of #imgContainer if you want to show 10 images per column. For instance, if you want to show 20 images per column, set parent height to 1000px or <p> height to 25px
#imgContainer {
max-height: 500px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
#imgContainer p {
position: relative;
margin: 0;
width: 50px;
height: 50px;
}
#imgContainer img {
width: 100%;
height: 100%;
}
#imgContainer span {
color: #877000;
line-height: 50px;
font-size: 16.5px;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
<div id="imgContainer">
<p><img src="http://goo.gl/L72CdX"><span>1</span></p>
<p><img src="http://goo.gl/L72CdX"><span>2</span></p>
<p><img src="http://goo.gl/L72CdX"><span>3</span></p>
<p><img src="http://goo.gl/L72CdX"><span>4</span></p>
<p><img src="http://goo.gl/L72CdX"><span>5</span></p>
<p><img src="http://goo.gl/L72CdX"><span>6</span></p>
<p><img src="http://goo.gl/L72CdX"><span>7</span></p>
<p><img src="http://goo.gl/L72CdX"><span>8</span></p>
<p><img src="http://goo.gl/L72CdX"><span>9</span></p>
<p><img src="http://goo.gl/L72CdX"><span>10</span></p>
<p><img src="http://goo.gl/L72CdX"><span>11</span></p>
<p><img src="http://goo.gl/L72CdX"><span>12</span></p>
<p><img src="http://goo.gl/L72CdX"><span>13</span></p>
</div>
I've been trying to get this image centered in the page for a while, and for some reason margin-left: auto; margin-right: auto; weren't doing anything. So in the spirit of wildly trying everything in sight, I stumbled on the following surprisingly correct result. My question is, why on earth does setting the width to 25% work? I would have expected 100%, or 50% at least.
This fiddle shows some other widths, which apparently behave in a nonlinear fashion: http://jsfiddle.net/mo85kkvv/
(Bonus question: is there a super-obvious way to use the margin-left/right properties instead that I'm missing?)
HTML:
<body>
<div id="bcontainer">
<img src="banner.png" alt="banner" />
</div>
</body>
CSS:
body {
margin: 0;
}
#bcontainer {
width: 25%; /* why 25%?? */
height: 50px;
display: table-cell;
text-align: center;
}
I don't know a lot about HTML but I think that the proper way to define the class container is:
.container {
height: auto;
display: block;
margin:auto;
}
This is more generic. You can use the element inspector, and see how the layers change.
Is what your after ? http://jsfiddle.net/mo85kkvv/4/
HTML
<body>
<div class="container" id="one">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="two">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="three">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="four">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div>
</body>
CSS
body {
}
.container img{
width:100%;
display: inline;
text-align: center;
margin: 0 auto;
}
#one {
width: 25%;
margin: 0 auto;
}
#two {
width: 50%;
margin: 0 auto;
}
#three {
width: 75%;
margin: 0 auto;
}
#four {
width: 100%;
margin: 0 auto;
}
It all depends what you want. Do you want the wrapper to be centered with the image floating in the center, or do you want the wrapper (in this case .container) to shrink around the image and be the one that floats in the center? I have updated your fiddle with simple examples of a few options.
http://jsfiddle.net/mo85kkvv/6/
I´m trying to place a slided image in the center if the page. I have it almost done, the thing is that inner each piece of the image I have a small space, like if it has some little padding (which it hasn't), does anybody sees something wrong in the code?
<style type="text/css">
html, body, #wrapper, images {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
}
.center {
width: 800px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
.center_mini {
margin: 0px;
padding: 0px;
border: 0px;
}
.center_mini_float {
float: left;
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
<div class="center">
<div class="center_mini">
<img src="images/background_01.png" width="800" height="144" alt="bg">
<div class="center_mini">
<div class="center_mini_float">
<img src="images/background_02.png" width="503" height="456" alt="bg">
</div>
<div class="center_mini_float">
<div class="center_mini">
<div class="center_mini">
<img src="images/background_03.png" width="246" height="89" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_05.png" width="246" height="106" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_06.png" width="246" height="102" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_07.png" width="246" height="159" alt="bg">
</div>
</div>
</div>
<div class="center_mini_float">
<img src="images/background_04.png" width="51" height="456" alt="bg">
</div>
</div>
</div>
<!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>
Try adding:
img { display: block; }
The problem is that IMG tags have a natural DISPLAY value of "INLINE". This causes extra whitespace to appear around the image in certain situations.
Depending on your layout needs, try
img { display: block; }
or
img { display:inline-block; }
If your images are otherwise working the way you want, inline-block will cause the least amount of thrash.
More info:
http://www.w3schools.com/cssref/pr_class_display.asp
http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/
I think the better solution will be using
img { vertical-align: middle; }
This way you won't alternate the default browser image display. Also, make sure the image container has line-height: 100%, that could be causing problems too.
Images have display:inline; by default, that's what's causing the whitespace between your images. You can do three things to prevent this:
float:left;
or
display:inline-block;
or
display:block;
I’m updating some legacy code on an old website, and the CSS is a nightmare. All I want to do is make the div that holds a username expand a bit when needed, and keep the outer div centered (horizontally) on the page. The myLabel control is populated based on a user’s name (it typically isn’t pre-defined as John Doe).
Currently, between the 800px value on myContainer, and the 350px value on myGridB, longer usernames are wrapping inside of the div. I’d rather display the long names on one line and, when possible, not bump the other controls to the next line.
I’ve tried using min-width on myContainer and myGridB , but that just allows the divs to expand across the whole page. I see this is common behavior for divs in this question.
I also tried some of the methods in this other question, but that pushed my header content to the left, and I need it centered.
I realize this code is a garbled mess, but I appreciate any ideas…
aspx:
<div class="myLogo1">
<div class="myContainer" style="width: 800px">
<div class="myGridC myLogo2 first">
<a onclick="loadMyHomePage(); "><img src="myImageAddress" /></a>
</div>
<div class="myGridB first last">
<div class="myHome myGridB first last">
<asp:Label runat="server" CssClass="myHome" ID="myLabel">
John Doe
</asp:Label>
<span class="myHome">
<asp:HyperLink NavigateUrl="mySettingsPage.aspx" runat="server">
My Settings
</asp:HyperLink>
</span>
<a href="myLogoutPage.aspx") %>">
<img src="myLogout.jpg") %>" alt="Logout" />
</a>
</div>
<div class="myGridB first last">
<div class="myGridA myPaddingA myHome">
<a href="myOtherPage" target="_blank">
<img width="180px" height="72px" src="myOther.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
css:
.myLogo1
{
background-color: #363636; /* #000000; */
width: 100%;
height: 125px;
}
.myContainer
{
margin-left: auto;
margin-right: auto;
width: 960px;
}
.myGridA, .myGridB, .myGridC {
display: inline;
float: left;
margin-left: 5px;
margin-right: 5px;
}
.myGridA
{
width: 190px;
}
.myGridB
{
width: 350px;
}
.myGridC
{
width: 390px;
}
.myLogo2
{
border: none 0px transparent;
padding-top: 10px;
}
.first
{
margin-left: 0;
}
.last
{
margin-right: 0;
}
.myHome
{
text-align: right;
display: block;
vertical-align: top;
float: right;
position: relative;
font-size: 9pt;
}
.myHome span
{
font-size: 9pt;
float: left;
padding: 3px 5px 0px 0px;
}
.myContainer .myPaddingA
{
padding-left: 44px;
}
If it's ideas, how I usually horizontally center my divs is I set the container to a certain % width. then i use margin: auto; hope that helped.