I am designing a page, which has 2 left-sided tables (one below another), one more table on the right and block of text in the middle. Here is what I've tried:
CSS:
#left {
float:left;
padding-right: ;
}
#right {
float:right;
}
#center {
margin-left: ;
margin-right: ;
}
#text {
width:60%;
margin:0 auto;
}
HTML:
<body>
<div id="left">
<table style="width:; background-color:#>
...
</table>
<table style="width:; background-color:#">
...
</table>
</div>
<div id="right">
<table>
...
</table>
</div>
<div id="center">
<div id="text">
<h>My text goes here</h>
</div>
</div>
</body>
The central part (text) appears in the middle of the page, but it is right UNDER those three tables (left- and right-sided), not between them... How do I fix it?
Thank you!
why are you using float? put the div#center between div#left and div#right. Give your body a width. Now give div#left, div#right, div#center widht=33.33%, it should work. try it out.
Figured it out:
<div style="width: 70%;">
<div style="float: left; width: 20%;">Table1 and Table 2</div>
<div style="float: left; width: 60%;">My Text</div>
<div style="float: left; width: 20%;">Table3</div>
<br style="clear: left;" />
</div>
Found out there is more efficient way by using CSS3 Multi-column layout
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Bootstrap has a framework, just apply .col-md-N to your divs
http://getbootstrap.com/examples/grid/
Related
I am learning html and css and I need to add spacing between each pane being displayed. How would I do this?
I currently have the below code which creates two columns for me. That's as advanced as I know how to get :)
<body>
<div class="row">
<div class="column">
<canvas id="Top left"></canvas>
</div>
<div class="column">
<canvas id="Top right"></canvas>
</div>
</div>
<div class="row">
<div class="column">
<canvas id="Bottom left"></canvas>
</div>
<div class="column">
<canvas id="Bottom right"></canvas>
</div>
</div>
</body>
<style type="text/css">
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
you need to add margin: 10px of your .column. then you will get some space.
Hey you should try using padding and margin attribute of CSS and set margin-left=desired pixels and do the same with margin-right or use padding-right or left.I hope this answers your question
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'm trying to make two divs to be one on top of another, like this:
The fiddle:
<!-- CSS -->
.table {
display:table;
}
.div1 {
display:table-cell;
vertical-align:middle;
}
.div2 {
display:table-cell;
vertical-align:bottom;
}
<!-- /CSS -->
<div class="table">
<div class="div1">
Top
</div>
<div class="div2">
Bottom
</div>
</div>
Put a wrapper element with display: table-row; in each table-cell element you want to isolate. This will stack the cells in different rows, one on top of the other.
And don't use tables for your layout ... here's why: Why not use tables for layout in HTML?
when I did the fiddle.... I came up with this (no css)
<div>
<div align='center'>
<div>
Socrates (this should be on top of his head)
</div>
<div>
<img src="http://www.mrdowling.com/images/701socrates.png"/>
</div>
</div>
</div>
Try this:
Html:
<div class="table">
<div class="align-middle">
Socrates (this should be on top of his head)
<img src="http://www.mrdowling.com/images/701socrates.png"/>
</div>
</div>
CSS:
.table {
display:table;
}
.align-middle {
display:table-cell;
vertical-align:left;
}
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>
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.