new to css .
In asp.net mvc 3 I load a list of customers in a table.
Next to this table I would like to float some images.How do you do it in css?
thanks a lot
The answer depends on how much images you want and how they are aligned to each other.
The simplest form just floats the table left, see http://jsfiddle.net/NGLN/8AHhG/, but this only works for the height of the table.
Another form floats the images right, see http://jsfiddle.net/NGLN/8AHhG/2/, but that layout may not be disered.
You can also group the images, kind of a combination of both above, see http://jsfiddle.net/NGLN/8AHhG/3/.
float:right the images and lower the width of the table
Update
Example
<div id="container">
<table id="mytable">
</table>
<div id="images">
<img />
<img />
</div>
</div>
And the CSS
#container, mytable, images {
margin:0;
padding:0; /* Avoid excess of width due to margins or paddings */
}
#container {
width:1000px;
}
#mytable {
width:600px;
float:left;
}
#images {
width:400px;
float:right;
}
This way you should have now 2 columns, the left one which is your table, and the right one which is a div containing all the images, which should stick to the right of the table.
Related
I'm trying to create a sort-of table of clips on my webpage. The idea is that it's basically (in my mind) a table with a thumbnail in the left column, and then a right column would house a title, where the story appeared, a date, and a description. I have no trouble doing this using HTML <table> but I'm trying very hard to get better at CSS.
I've combed this (very helpful) site and am far ahead of where I was this morning. However, I'm having trouble with setting the "height." I don't want to set a firm height. I want the "row" to adjust to the height of an image or block of text, and for the height to be the same for both "columns."
Right now I have this.
HTML:
<p class="imageclass">thumbnail</p>
<p class="textclass">all sorts of text, separated by line breaks</p>
CSS:
.container {
width:620px;
}
.imageclass {
float:left;
width:120px;
}
.textclass {
float:left;
width:500px;
}
Have you tried applying overflow: hidden to .container?
If this is really going to be a "row", why not wrap all of the content in a div? This div will scale to be the height of its tallest child. Then if you need to manipulate the rows you can just use CSS selectors for the row class:
<div class="row">
<p style="height:200px; background: black;" class="imageclass">thumbnail</p>
<p class="textclass">all sorts of text, separated by line breaks</p>
</div>
Right now I have a main div with an id of "wrapper", and inside this div I am trying to make two other divs that take up about the entire width of "wrapper". The first div, "sidebar", is narrow and contains some information I want displayed on the far right of "wrapper". The second internal div I have will be dynamically updated using php and javascript from data inserted by users, id called "maincontent".
I can get them positioned inside "wrapper" fine at first. The problem comes when new content is added in the "maincontent" div. When new content is added the "sidebar" div will move down proportionally to the height of the newly added content.
So, my question is this:
How do I get the two internal divs to maintain their positions on the top of the page while still being able to extend dynamically downward without anything moving around?
you need to float:left your left-content:
see the css below:
.wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;
}
where your divs are as below:
<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>
what's important is, you accurately divide the width of the parent to the child containers
i.e. total width of child containers <= parent width
see, you need to learn about position attribute of css-style
when you do position:relative for any container, css properties like top, left,right,bottom starts working for them.
Check out my fiddle, the Javascript is completely unnecessary. Let me know if it helps you, or if you have any questions left. The most important part is having float: left or float: right in both the maincontent and sidebar.
http://jsfiddle.net/y89zp/
How to place an image in table's right corner? I want set a image for an table corner.
How can I do it in html or css?
Here is example of what I want to get:
You need a wrapper for the table as #Sonasish Roy say:
HTML:
<div id="container_table">
<img src="img_right.jpg">
<table>
<!-- Here is your table content /-->
</table>
</div>
CSS:
#container_table{
position:relative;
//Set some width because table has width:100%;
width: 90%;
}
#container_table img{
position:absolute;
right:0;
top:0;
}
#container_table table{
//Here some css for your table, even you can use background-image, but you can have some problem with borders.
}
If you want to see all the above code working with an example table and image, I made this fiddle: http://jsfiddle.net/H3Vqc/5/
you need to wrap the table in a div, set the div in relative position and the corner details image in a absolute position.
Appologies for a duplicate question, but none of the answers to the other questions seem to fix my problem. I would like to align a div in the center of the page. The div must only be as wide as the content inside it. It will be used as a modal popup. I have setup a jsFiddle here: http://jsfiddle.net/PDzNj/11/
The div aligns its left side in the middle and not the center of the div (which is the desired effect)
Thank you in advance for any help
One option is to emulate a table with the <div>'s surroundings.
<div class='outer'>
<div class='inner'>
<div class='thebox'>Contents</div>
</div>
</div>
And then use the CSS:
div.outer {
display:table;
width:100%; //Or however wide you want the container to be
}
div.inner {
display:table-cell; //This allows the use of vertical-align
vertical-align:middle;
text-align:center;
width:100%;
}
div.thebox { //Your variable-width container
display:inline-block; //Makes it obey text-aligning.
}
You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.
I have a div like this
<div id="browsers">
<h2>Title</h2>
<p>Text recomending the use of either Chrome or Firefox.</p>
<img src="img/64-chrome.png" />
<img src="img/64-firefox.png" />
</div>
and the CSS
#browsers {
margin:0 auto;
padding:22px;
width:500px;
background:white;
}
and I want to center the two images in the middle of the div. I have managed to center them with
#browsers img {
margin-left:auto;
margin-right:auto;
display:block;
}
however the output is not what I want, since one image is on the top of the other. I want them to be on the same line. What's the best or the usual way to do it?
Usually just #browsers {text-align:center;} and remove what you have in #browsers img {...}
As you have extra stuff in #browsers. You'll need to put your browser icons in a separate div or your extra stuff outside of #browsers.
Eg.
<div class="browser-icons"> ... </div>
Your problem is that you are telling the images are blocks in display:block;... try display:inline; instead.