I keep reading that you can use html/css columns without using them in a table. The www.w3schools.org site shows that you can, but I can't get it to work out at all in my code. basically I have this idea.
<div container="name">
<dl>item 1 </dl>
<dd>explain</dd>
<dl>item 2 </dl>
<dd>explain</dl>
...
</div>
What I need is for the container to have three columns and the section with the detailed list to be two columns than I will put the info for the third column in its own column. I know the column span is the best way to keep that separate, but I can't find any good explanations for this. And I can't get it to work out of my css page or html page.
I think you're going about it the wrong way. Try this.
html:
<div id="container">
<div id="left-col">
<!-- left column -->
</div>
<div id="content-col">
<!-- content column -->
</div>
<div id="right-col">
<!-- left column -->
</div>
</div>
css:
#container { overflow: hidden; width: 940px; }
#left-col { float: left; width: 200px; margin-right: 20px; }
#content-col { float: left; width: 500px; }
#right-col { float: right; width: 200px; }
demo - http://jsfiddle.net/gk5vD/
FYI - you misunderstood what a dl is, have a look at http://www.htmldog.com/reference/htmltags/dl/
Firstly, please don't use w3schools. </rant>
CSS3 has columns built in. Have a read about it here and here.
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
I have this site:
http://www.les-toiles.co/
In the footer of the site I have 3 items ("contact info","customer care","about us","social media").
How do I do to have an equal distance between these elements?
I've tried to modify the CSS code but unfortunately we did.
I posted a section of code that I have no idea who would be best suited for this problem.
I would ask if you can inspect least CSS code and give me advice please.
<div class='footer'>
<div class='footer-box'>
</div>
<div class='footer-box'>
</div>
<div class='footer-box'>
</div>
</div>
.footer-box
{
width: 33.33%;
float: left;
box-sizing: border-box;
padding: 20px;
}
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
I have the following html. I need to align the .faf-text fields to each other vertically without using a table.
<div id="faf-field-2" class="faf-field faf-field-input ">
<div class="faf-name"> Vendor </div>
<div class="faf-text"> Brocade </div>
</div>
<div id="faf-field-6" class="faf-field faf-field-input ">
<div class="faf-name"> Platform </div>
<div class="faf-text"> ADX </div>
</div>
<div id="faf-field-7" class="faf-field faf-field-input ">
<div class="faf-name"> Version </div>
<div class="faf-text"> 12.4 </div>
</div>
An example of what the layout should be like is below :
Vendor Brocade
Platform ADX
Version 12.4
Thanks
You can use the CSS display: table to make your elements act like a table.
Use display: table-row; for the container <div> tags to make it behave like a <tr> and display: table-cell; for the elements inside to make it behave like <td>.
Something like this:
.faf-field-input{
display: table-row;
}
.faf-field-input div{
display: table-cell;
}
.faf-name{
width: 80px; /*for testing*/
}
jsFiddle DEMO
Just use
float: left
for both classes.
An ex:
.faf-name{
width: 200px;
float: left;
/* other CSS may come here */
}
in the same way,
.faf-text{
width: 200px;
float: left;
/* other CSS may come here */
}
It would have been easier and clearer if you have provided jsfiddle. Hope this will work for you
Just Use this css property so faf-text fields to each other vertically without using a table.
.faf-field{display:table-cell;}
DEMO
From your code, it looks to me that you are displaying tabular data.
So it's perfectly good to use a table.
I am trying to align a full name,picture and the post just like they do in most social networks (linked-in or facebook).But i cant align them the well.Can anybody please try to fill the gaps with necessary css commands?Thank you in advance.
<div>
<span class="picture"> <img src="/assets/images/rails.png"/></span>
user-full-name
<span class="post"></span>
</div>
css
.picture{height:40px;
width:40px;
}
.user-name{
margin-bottom:35px;
}
.post{ }
.inline_table{
display: inline-table;
position: relative;
}
is another property you might want to look at ... any element which has both position relative AND inline table .. will be aligned left to right butted up against each other.
so in this example:
<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">
will all be aligned along the same row
Here's a basic example: http://jsfiddle.net/GU2aM/ to get you started.
span.picture {
display: block;
float: left;
margin-right: 10px;
}