I have the following code. Can someone please suggest the right way to give space between two column classes ?
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
.row {
clear: both;
}
.column {
width: 50%;
box-sizing:border-box;
padding: 10px;
float: left;
}
1 Using margin (Recommended way)
.column {
margin: 10px; /* or what ever */
}
2 Using Line Breaks (Not recommended)
Using this:
<div class="column"></div>
<br />
<div class="column"></div>
3 Padding (that you're using)
Padding would add a space inside the element. Which won't do the trick. You need to use margin instead of padding.
try
<div...></div> <div...></div>
if that does not work or has a compatibility issue
then try:
<div class="column" id="1"></div>
<div class="column" id="2"></div>
CSS:
div.column#1{position:fixed/relative/absolute;left: #px or #% ;top: #px or #%;}
note: ".column" is the class; the "#1" is the id; position should have only one of the listed values and there may be a few others; Left defines the # of px or % from the left of the document; and top defines the # of px or % from the Top of the document;
NOTE:I have only tested this method with Firefox. so other browsers may have other parameters.
Related
How do I get 2 pictures to appear side by side in this particular html example?
Here is my fiddle
What I want is to align pictures side by side in html, and similarly for the h1 tag above and the p tag below the pic.
illustration of what I want:
title0------------title1
pic0--------------pic1
word0-------------word1
^^^^^^^^^^^^^^^^^^^^^^^^^
This is an example of what I want fiddle, but here it doesn't work when I want add the h1 tag above and the p tag below the picture. I do, however like the way margin-right can control the lateral distance between the pics.
Here is a similar question but this is slightly different.
EDIT1 here is the bootstrap version mentioned below
EDIT2 here are other solutions from below
Amitesh Kumar - https://jsfiddle.net/HattrickNZ/ko1qsbom/9/
YoYo - https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
Michael_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/
they all offer a solution but I think the bootstrap version is the best as it handles when the screen width is resized the best.tks
You can use display:inline-block; to set the element to just use the width they have. Normally, h1 or div are the display:block; elements.
Here is the fiddle for you.
What you can do is put title0, pic0, and word0 in a div and add a class to the div so you can float it to the left using css. On the other side you have title1, pic1, and word1 in a div that has a class that would float it to the right.
Here's the float in work:
.leftBlock {
float: left;
}
.rightBlock {
float: right;
}
Check out this jsfiddle: https://jsfiddle.net/ko1qsbom/6/
Also more information on floats: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Side-by-side positioning is simple and easy with flexbox.
Here's all you need:
#container {
display: flex;
text-align: center; /* optional */
}
<div id="container">
<section>
<h1 class="left">title0 </h1>
<img class="left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<p class="left"><a>word0</a></p>
</section>
<section>
<h1 class="right">title1 </h1>
<img class="right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
<p class="right"><a>word0</a></p>
</section>
</div>
There are various options for aligning the two sections in the row (center, space-between, flex-start, etc.). See here for details: https://stackoverflow.com/a/33856609/3597276
Learn more about flexbox here: A Complete Guide to Flexbox
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
Try This give them witdth total width should be less then 100% and float:left
HTML
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
<!--<h1 class="left">title0 </h1> -->
<img class = "left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<!-- <p class="left"><a>word0</a></p> -->
<!-- <h1 class="right">title1 </h1> -->
<img class = "right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
<!-- <p class="right"><a>word0</a></p> -->
CSS
/*
img.right{
float: left;
margin-right: 300px;
}
*/
h1.left p1.left {
text-align: left;
float:left
}
h1.right p1.right{
text-align: right;
}
.div1 {
width:40%;
float: left;
}
.div2 {
width:40%;
float: left;
}
you can use display:inline-block; also
<style>
.holder{
width:3in;
height:4in;
background:aqua;
}
.orangeBox{
float:left;
background:orange;
width:1in;
height:1.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;
}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>
What I'm trying to achieve is to have the individual boxes float left (which they're doing) but also to stay on the same line.
In the example here I want box 5 to NOT appear under box R, but rather to automatically wrap to the next full line.
I know this can be achieved via float:right, but that would reverse all the numbers, making everything backwards.
https://jsfiddle.net/o4eem3za/
You can clear every other element after the 6th element:
Updated Example
.yellowBox:nth-child(2n + 6) {
clear: left;
}
Alternatively, depending on the desired results, you could also just clear the 6th element as well:
Updated Example
.yellowBox:nth-child(6) {
clear: left;
}
Shouldn't you just make both boxes orange and yellow same height?
Right now you have orangebox 1.5in and yellowbox 1in heigh. Set 1.5 for yellowbox also and it will fix your issue.
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1.5in; /* changed this from 1in to 1.5in */
}
Fiddle: https://jsfiddle.net/Munja/o4eem3za/1/
If you are looking for a grid pattern, where you have distinct rows, I'd recommend display:table and display:table-cell. (EDIT: discard the display:table stuff, if you're floating R right - unnecessary)
<style>
.holder{
width:3in;
height:4in;
background:aqua;
}
.orangeBox{
float:right;
background:orange;
width:1in;
height:1.5in;
margin-bottom:.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;
}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>
EDIT: This still uses floats, but it leverages the special display attributes of table cells. Change the width of the .holder to 4 and you will see it functions as you'd expect.
EDIT v2: Changed orangeBox to float right, added .5 margin to bottom, removed display:table stuff (unnecessary if floating per poster's comment)
With display: inline-block you can achieve it
https://jsfiddle.net/o4eem3za/4/
display:inline-block
I am building a website using singularity.gs which I am fairly new to.
I am having trouble giving a div a background-color, this is my html structure:
http://oi44.tinypic.com/205xt1i.jpg , the "green" part is my about div.
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
</div>
To achieve this affect is had to set a height for the div:
#include breakpoint(70em) {
.about {
height: 340px; //This property will set the height of the div
}
.about .photo {
padding: 1em;
#include grid-span(2, 4);
}
.about .text {
padding-top: 7em;
padding-left: 1em;
display: inline;
#include grid-span(4, 6);
}}
If I remove the "height:340px" no background will be drawn:
http://oi39.tinypic.com/2s16ezl.jpg (only my thin borderline)
Is there a way to let the div wrap its height around its content (.photo,.text)?
Note: if i remove #include grid-span for .photo and .text the background shows but I do not want to lose the singularity functionality
Thanks in advance!
Don't span the container.
The problem you experience happens because Singularity columns are floated, and floated elements are taken out of the flow. This means that the container does not "know" about your columns any more, so it behaves like an empty element.
There's a property called clear that positions an element below any nearby floated element. If you create an extra element inside the container after all your columns, the clear: both; rule applied to it will push it below the floated columns, effectively stretching the container as high as columns are:
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
<div class=clear></div>
</div>
.clear { clear: both; }
But don't add an extra element, that's not semantic. Instead, use the :after pseudo element that appears at the end of an element's contents. Using :after is just like creating a blank element at the end of element's contents.
.about {
&:after {
content: ''; // This is required for the pseudo-element to exist
display: block; // Default display is inline, have to change that for `clear` to work.
clear: both; // Yay, magic!
}
}
This technique is called "clearfix".
This can be done even simpler with the multi-purpose Toolkit extension from Team Sass, the authors of Singularity:
#import 'toolkit';
.about { #extend %toolkit-micro; }
The %toolkit-micro extendable has some additional rules that makes the clearfix trick work in older browsers. There's also the %clearfix-legacy extendable that works even in ancient browsers.
I fixed it.
Forgot to add an #include grid-span(12, 1); for my .about
I have a checkbox next to 3 lines of text. I wish to center the checkbox vertically against these lines of text:
A
[] B
C
I'm attempting to do this via div containers while resisting the immense temptation to revert to tables. Here's my code so far:
<div style="overflow:auto;">
<div style="height:57px; float:left;margin-right:15px;">
<input style="vertical-align:middle;height:100%" type="checkbox"
name="theCheckbox" id="checkboxId">
</div>
<div style="float:left;">
A<br/>
B<br/>
C
</div>
</div>
JSFiddle
While the above 'works', I'm not happy about the hard coded height. Changing 57px to 100% makes the checkbox disappear (computed height becomes 0). Removing the height style from the div alltogether also results in a disappearing checkbox. Can anyone suggest improvments or alternative solutions to achieve my goal?
EDIT: I have to support IE7+ amongst other browsers.
You could treat the elements as a table (without actually using a table) like this:
HTML
<div id="container">
<div class="tableCell">
<input type="checkbox" name="theCheckbox" id="checkboxId">
</div>
<div class="tableCell">A<br/>B<br/>C</div>
</div>
CSS
#container { display: table; }
.tableCell {
display: table-cell;
vertical-align: middle; }
See the fiddle here: http://jsfiddle.net/QpnkV/2/
For backwards compatibility think about using scripts in your dochead like this:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
How about this?
HTML:
<input type="checkbox" name="theCheckbox" id="checkboxId"/>
<div id ="try">
A<br/>
B<br/>
C
</div>
CSS:
#checkboxId{
position:relative;
vertical-align:middle;
}
#try{
position:relative;
display:inline-block;
vertical-align:middle;
}
Here is the JSFiddle
You can position the checkbox vertically using absolute positioning.
For your HTML, you can simplify it as follows:
<div class="wrap">
<input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
<div class="label">A
<br/>B
<br/>C
<br/>D</div>
</div>
and apply the following CSS:
.wrap {
border: 1px dotted gray;
position: relative;
overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.label {
margin-left: 20px;
}
Demo Fiddle: http://jsfiddle.net/audetwebdesign/N23qr/
The tradeoff here is that you need to hard code a value for margin-left on the .label container, which is less restrictive than specifying a height value.
Note About IE7
To get position: relative to work correctly for .wrap, you need to make sure that IE7 invokes the hasLayout property, which can be effected by applying overflow: auto. For more details, see: IE7 relative/absolute positioning bug with dynamically modified page content and specifically, http://www.satzansatz.de/cssd/onhavinglayout.html#rp
I have the following html:
<div class="count-unit">
<div class="count-digit digit0"></div>
<div class="count-digit digit6"></div>
</div>
<div class="count-unit">
<div class="count-digit digit0"></div>
<div class="count-digit digit4"></div>
</div>
<div class="count-unit">
<div class="count-digit digit4"></div>
<div class="count-digit digit2"></div>
</div>
<div class="count-unit">
<div class="count-digit digit3"></div>
<div class="count-digit digit9"></div>
</div>
Tied to each ".count-digit" is a sprite (viz. background image) which represents a png of a numeric digit. I'm trying to get the sprites to show horizontally with spacing, like this:
06 04 42 39
The CSS I'm using looks like this:
.count-unit
{
margin: 0 20px 0 20px;
padding: 0 20px 0 20px;
}
.count-digit {
background-image : url(Images/numbers.png);
background-color : transparent;
background-repeat : no-repeat;
float: left;
}
.digit0 {
height : 44px;
width : 30px;
background-position : -0px -0px;
}
Only one of the sample digits (".digit0") is shown. As can be seen, I'm trying to put the spacing around each "numeric" image-pair with padding or margins on the containing "count-unit" div. It isn't working. The "float: left" on the ".count-digit" is bypassing margin and padding settings.
How should I fix this? I tend to think I need to kill the floats, but the alternative "display: inline" prevents the sprites from showing.
Worse, though these sprites work on IE8 and Chrome, they aren't showing when I turn on IE8 compatability mode. I'm not sure what that is about. Any ideas?
The float: left property shouldn't ignore margins or padding. I think you should have specify floating for the .count-unit class though.
.count-unit {
margin: ...
padding: ...
float: left;
}
I've tried it here, and there doesn't seem to be any problem: http://jsfiddle.net/QGZjn/1/