I am having issues with my CSS. I am trying to make information display in 2 columns, denoted by the .left and .right classes.
You can see the issues at my jsFiddle
EDIT: Altering answer based on comments.
You are displaying tabular data - so use Tables. You can avoid nested tables by using the tbody tag, as demonstrated by this similar question:
For this solution, what you'll do is create a table. Each TBODY will represent one 'group' of data. In each group, the first column will be for the metadata (like thead), and the second column will be the actual data:
<table>
<tbody> <!-- First Set of Data -->
<tr>
<td> Sessions </td>
<td> 1 </td>
</tr>
<tr>
<td> Date </td>
<td> 1/1/2003 </td>
</tr>
...
</tbody>
<tbody> <!-- Second set of Data -->
<tr>
<td> Sessions </td>
<td> 5 </td>
</tr>
...
</tbody>
</table>
You can then style more easily using an external stylesheet, perhaps using the :nth-child selector and / or the colgroup tag or Javascript.
You might also get more answers if you re-name your question to something like "How to display tabular data with left hand column as key".
Here's a way to do what you're trying to do without using aboslute positioning (which is prone to breaking).
http://jsfiddle.net/WSEH4/33/
Basically, using inline-blocks guarantees that elements will not overlap if the CSS is incorrect. However, the best solution to your problem would just be to use tables instead. Tables exist for situations like this, with a label/value system.
Alternatively you can done it via floating. Example shown via demo.
http://jsfiddle.net/WSEH4/36/
I much prefer to use divs over spans: ( jsFiddle: http://jsfiddle.net/WSEH4/44/ )
HTML:
<!DOCTYPE html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="display: block;">
<div class="child">Where</div>
<div class="child">China</div>
<div class="clear"/>
<div class="child">Voltage</div>
<div class="child">220 V</div>
<div class="clear"/>
<div class="child">Frequency</div>
<div class="child">50 HZ</div>
<div class="clear"/>
<div class="child">Plug Type</div>
<div class="child">USA</div>
<div class="clear"/>
</div>
</body>
CSS:
.child
{
float: left;
top: 6px;
left: 6px;
width: 25%;
padding-right: 10px;
white-space: nowrap;
border-bottom: 1px solid #eee;
}
.clear
{
clear: both;
display: block;
}
Hey you can do this as like this
Css
div{
margin-top:10px;
}
.right{
float:left;
width:50%;
border-right:solid 1px red;
}
.left{
float:right;
}
HTML
<div style="display: block;width:200px;overflow: hidden;">
<div class="right">China</div>
<div class="left">Plug Type</div>
<div class="right">220 V</div>
<div class="left">Frequency</div>
<div class="right">50 HZ</div>
<div class="left">Voltage</div>
<div class="right">USA</div>
<div class="left">Where</div>
</div>
Live demo http://jsfiddle.net/rohitazad/WSEH4/52/
Related
As we can see from the image my content overlaps with the header image and this is the code I have:
<style type="text/css" media="print">
#page {
/*size:landscape;*/
#top-center {
content: element(header);
}
#bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div class="header">
<img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">
</div>
P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.
Headers and footers are established within the page margins.
So the solution is to increase the page top margin, for example:
#page {
margin-top: 50mm;
}
Method to implement header footer properly in PDF
After finding a lot on internet on different solutions and workaround, I'm finally sharing a way that works for me.
Please add these style to report container (the div in which report is rendered).
<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>
// Div properties may differ
Wrap the Doc component into the table structure with thead and tfoot according to the size of your header and footer(table is wrapped inside a div).
<div style="width: 100%;">
<table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
<thead class="page-break-before">
<tr>
<td>
<div style="height: 80px;"></div> // space for the respective header
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> Your Data Goes Here........</div>
</td>
</tr>
</tbody>
<tfoot class="show-in-print page-break-after">
<tr>
<td>
<div style="height: 130px;"></div> // space for the respective footer
</td>
</tr>
</tfoot>
</table>
</div>
Sample Header and footer
<div class="page-break-before">
<div>A long header content...</div>
</div>
<div class=" page-break-after">
<p> A long footer content...</p>
</div>
How do I align the text as in the picture below?
<div id="contact-info">
<div id="contact-list">
<div id="adresa">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</div
<div id="telefon"></div>
<div id="mail"></div>
</div>
</div>
#contact-info
{
width:300px;
height:300px;
background:url(images/BODY-CONTACT.png);
position:absolute;
right:0;
}
How can I solve this problem?
Fail to fix it as I want
www.avocat.dac-proiect.ro/wp
Generally, you should use div to nesting elements, in order to align them in a decent way. Also pay attention to the display:blockorinline. You could read more in W3C docs. My touch to this problem is as follow:
<div id="adresa">
<div id="addPadding" style="
padding: 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="
float: right;
display: inline;
width: 80%;
">
<p style="text-align:left;">Calea Dorobantilor,nr.74,</p>
<p style="text-align:left;">bl.Y9,SC.2,Ap.25,<br>Cluj-Napoca,400609,
<br>Romania</p>
</div>
</div>
</div>
I used 2<div>, one wrap the two <p> and the other one wrap the <img>and the new '' (or you can just simply add padding on the <div id="adresa">).
it will get a more similar layout result to your mockup, I wish I could took screen shot for you.
you just need to fix the text-align:left and margin on <p>tag to finish your job.
NOTE: This is NOT the whole solution. I just gave you an idea about what approach should be used.
This is so simple ... For this you need to make <p> and <img> position: absolute;. like below
.centered {
position: absolute;
right: 12px;
top: 110px;
}
and add class to ps and img like
<p class="centered">....</p>
<img class="centered" src="...." />
Try this using different top and right values for each p and `img.
Although the CSS purists would tell you not to, I would just add a table
<table>
<tr>
<td>
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;">
</td>
<td valign="top">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</td>
</tr>
</table>
I am having a hard time explaining in words what I am looking for, so here's an example:
http://jsfiddle.net/toaeb0zt/
<div style="width:800px ">
<div style="width:200px;height:500px; background:purple; float:left"></div>
<div style="width:200px;height:200px; background:blue; float:left"></div>
<div style="width:200px;height:200px; background:green; float:left"></div>
<div style="width:200px;height:400px; background:yellow; float:right"></div>
<div style="width:400px;height:200px; background:orange; float:left"></div>
<div style="width:200px;height:200px; background:brown; float:left"></div>
<div style="width:400px;height:200px; background:gray; float:left"></div>
<div style="width:200px;height:100px; background:red; float:left;"></div>
</div>
This layout was done with CSS combining left and right floats. I read about flexbox to see if it could do it, but seems like that's a negative.
I realize it could be done by nesting divs into bigger divs, but I need to make this responsive and this solution would make responsive a nightmare.
I have been trying to stay away from jQuery and deeper programming, but I understand it might be the best option. I appreciate this community's help; thank you in advance.
Would you are doing seems to me like a nightmare ! there are alot of libs out there that will help you get this grid together. A masonry grid would be the most aligned with your requirement.
masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
I have used Isotope alot ! this is one of the many things you can do with Isotope:
http://codepen.io/desandro/pen/mEinp
$( function() {
$('.isotope').isotope({
layoutMode: 'fitColumns',
itemSelector: '.item'
});
});
study the website very carefully
http://isotope.metafizzy.co/
Hope this helps/ this solution will require JavaScript (and jQuery)
You could use a table of blocks and just color each one. You can do this using css and a simple table.
Here is a fiddle, http://jsfiddle.net/r3vycfa1/
I'm not positive what your looking for, but this will be more responsive.
The classes .a, .b, .c each have a different color and you can apply them to the blocks.
HTML
<table>
<tr>
<td class="a"> </td>
<td class="a"> </td>
<td class="b"> </td>
<td> </td>
</tr>
<tr>
<td class="a"> </td>
<td> </td>
<td class="b"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="b"> </td>
<td> </td>
</tr>
<tr>
<td class="c"> </td>
<td class="c"> </td>
<td class="c"> </td>
<td> </td>
</tr>
</table>
CSS:
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
height: 500px;
border-spacing: 0px;
}
td {
width: 10%;
height: 10%;
}
.a {
background-color: #00FF00;
}
.b {
background-color: #FF0000;
}
.c {
background-color: #0000FF;
}
I know there are lots of ways to center content with an unknown width on a fluid width page in HTML/CSS but I can't get them to work in this case for some reason and need help.
Firstly, let me state that I need a solution that works in common browsers and in IE6 (don't ask why).
Here's an example of markup and the problem. In this example I want the yellow boxes centered inside the blue box.
example on jsfiddle.net
<div style="background:blue;margin:0 auto;width:100%;">
<table style="margin:0 auto;">
<tr>
<td>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<td>
</tr>
</table>
</div>
I tried this method using a table but I also tried the -50% +50% method. I am happy to use any method that works on all common browsers and IE6.
Can someone help me fix it.
Please do not lecture me on IE6 or incorrect use of the TABLE tag.
Try this,
<tr>
<td>
<div style="width: 379px;">
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
</div>
</td>
</tr>
what I understood from your requirement that you want to make your div to center ? then please have a look on the below code
<style type="text/css">
.yourclass
{
background:yellow;
float:left;
padding:50px;
}
.blueback
{
background:blue;
}
.mytable
{
width: auto;
margin-left: auto;
margin-right: auto;
}
div.clear
{
clear:both;
}
</style>
<div class="blueback">
<table class="mytable">
<tr>
<td>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="clear"></div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
</td>
</tr>
</table>
Hope it helps...
After lots of research I can find no solution to this that works in all browsers and doesn't require IE6 hacks.
The best solution is display:inline-block and IE6/7 and various other hacks (eg. FF2).
The final solution taken from here is as follows:
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>
Whats the best way to split up a table element <td>? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.
For example:
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
any other ways to do this besides the following?
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
I want the internal element to be a <span> or whatever is best for this.
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
I would do something like:
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
then my css would resemble:
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
... or something along those lines.
You could do it like this, although spans and divs are much better imo.
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
The floats didn't seem to look right so I used flexbox:
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML:
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.
CSS:
table{
width: 100%;
}
.container{
width: 100%;
display: table;
}
.cell{
display: table-cell;
}
.cell .left{
text-align: left;
}
.cell.right{
text-align: right;
}
HTML:
<table>
<tr>
<td>
<div class="container">
<span class="cell left">LEFT</span>
<span class="cell right">RIGHT</span>
</div>
</td>
</tr>
</table>