So i'm having this:
<style>
div {
position: absolute;
top: 15px;
width: 500px;
background-color: lightblue;
}
</style>
<div>
<input type="submit" style="float: left" value="leftButton">
<input type="submit" style="float: right" value="rightButton">
</div>
an absolutely positioned button bar
What I want: If the user resizes the window and makes it smaller than 500px, the buttons should get closer together instead of adding a scrollbar. Is this somehow possible?
Use width specified as percentage.
width: 80%;
And if you need you can combine this with:
min-width: 30px;
To cover the case where user sizes too small to fit items in div.
If you want flexible button widths you can simply put them in a table row where the table cells are specified using percentages. Then they will size as user adjusts width. And here again you can combine with min-width and padding etc, to keep proper spacing. Eg.
<table style="width:90%;">
<tr>
<td style="width:10%;"></td>
<td style="width:80%;"></td>
<td style="width:10%;"></td>
</tr>
</table>
EDIT:
there is a solution!
width: 70%;
max-width: 500px;
This will make your bar adjust to the window width, but never exceed 500px. (optionally, add a min-width also)
Related
The following table method properly centers the div and the size of the div matches that of the content:
<table>
<tbody>
<tr>
<td width='50%'></td>
<td>
<div>
<input type='text' name='linksearch' size='40'/>
<a href=''>Search</a>
</div>
</td>
<td width='50%'></td>
</tr>
</tbody>
</table>
What is the equivalent CSS using just div elements? I see a lot of answers like:
div.center {
margin-left: auto;
margin-right: auto;
}
but when using this method it is not clear to me how to make the width of the div grow or shrink to match the content of the div. I can specify an explicit width but even then, the content can overflow to the right and thus it is not really centered (you can see this clearly by setting the background-color of the div).
So is the table method is still superior or is there a way to do this using only CSS?
UPDATE:
As requested, here is an example that illustrates the problem:
http://jsfiddle.net/qn0txere/3/
The first "table method" works as expected. The second 'margin: 0 auto' method does not really work in that the div does not shrinkwrap around the content. The content overflows to the right.
I see what you mean, but there are ways around that, and using CSS for the style is far more beneficial in the long run as it's much easier to change later on etc,
To fix the problem of the content going outside of the div you can use the auto property for the width and height,
Like this:
div.center {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
You may also wish to add min-width and min-height properties if needed to make it look more appealing if there isn't a great amount of content within the div (or max properties) :
min-width: 300px;
min-height: 500px;
max-width: 500px;
max-height: 600px;
You may also wish to add a ID or class to the specific div, so in this case you can more clearly write the CSS for just that specific div
You have to add a containing div (preferred) or add properties to the body. Since your markup was wrong anyways, I'll go for the preferred method by adding the FORM element:
<div class="center">
<form>
<input size="40" name="linksearch" type="text"/>
Search
</form>
</div>
Now, since I have my required elements, I can center things and make them work as I want because I have the chance to add positioning for all elements ( + proper markup):
.center {
text-align:center
}
form {
white-space: nowrap;
padding: 10px;
margin:0 auto;
width: auto;
background-color: #cc0;
display:inline-block
}
Really easy, huh? You can see an update to your fiddle so you can preview and play around
I made an image slider for my forum homepage but the content is comming out of the wrapper.
How can I make sure the content will always be 100% width of the wrapper?
HTML:
<div id="wrapper">
<table>
<tbody>
<tr>
<td>
<div class="rg-content">
//image slider code
</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
#wrapper {
margin: 0 auto;
max-width: 980px;
width: 90%;
background: linear-gradient(#fefefe, #e7e7e7);
}
.rg-content {
width: 100%;
background: #101010;
}
Screenshot:
What's Going On
It looks like your #wrapper doesn't have overflow set to hidden. Personally I tend to stay away from tables and use either float'd block elements or inline-block elements. I recently built a slider using figure for the outside wrap, ul for the fixed width inner wrap, and lis for each item. I had to set the figure to overflow:hidden for it to hide everything that wasn't supposed to be visible. Try adding that.
Code
#wrapper {
overflow:hidden;
}
Just add
<table style="width:100%;">
http://jsfiddle.net/jzLN6/
EDIT:
according to your jsfinddle and your comments I made some modifications to get this result
http://jsfiddle.net/bB9tQ/4/embedded/result/
is not fully functional but maybe its a basic idea of what you want to do
so if you want the layout to be fluid you will have to do some changes
remove de px of your ul and change your display to inline-block because if you have
display: block
this will make your li elements to lose the normal flow on the page and you won't be able to use % to stretch the content
<ul style="width: 100%; display: inline-block; margin-left: ;">
after that you should use % on each li tag instead of px.
if this is an approach to what you need, please let me know to give you a better elaborated example
I have a table set to 100% width. I will add a random div with php full of ads at times. I want the ad div to be on the right and the content of the table. I want the table to be on the left but still at 100% or so it will fill all the space to the left of the ad div.
In short, so when the div is not present the table will fill 100% width.
When the div is present the div will be on the right side of the table at a set width of 300px.
Here is the style for the div
.ContentAds {
float: right;
height: 100%;
width: 300px;
display: block;
clear: none;
}
The table is not a div but simply set to 100% width.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><p class="Title">Title</p>
<p>This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.. </p></td>
</tr>
</table>
For now I can only suggest to wrap your table with a positioned div. But I can't be sure that it will be sufficient to you cause you provided rather small amount of code
jsfiddle
<div class="ad">
advertise... advertise
advertise... advertise
advertise... advertise
</div>
<div class="table_wr">
<table>
<tr>
<td>
<p class="Title">Title</p>
<p>
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content.
This is the content. This is the content..
</p>
</td>
</tr>
</table>
</div>
CSS
body {
position: relative;
}
table {
border: 1px solid black;
width: 100%;
}
.ad {
float:right;
width:300px;
height: 500px;
background-color: #a2e89f;
}
.table_wr {
position: absolute;
left: 0;
right: 300px;
}
border is set for table for you can see where table stretches
I think this won't work unless you give the table a smaller set width when the other DIV is present then you could float it to the left too.
Perhaps you could have the table set to be 100% then when the other DIV is there you add a class onto the table which adjusts the width and floats it?
I'm trying to make a 100% height layout with a footer at the bottom. I have a site wrapper, in which I have two content divs. In the second content div I have a footer at the bottom. The problem is the top content div seems to be pushing the second content div beyond the website wrapper.
This is the code I'm experimenting with:
<style type="text/css">
html, body { height:100%;}
#sitecontainer {
height:100%;
border: medium #000 solid;
}
#contentcontainerone{
border: medium #F00 solid;
}
#contentcontainertwo{
height:100%;
border: medium #00F solid;
position:relative;
}
#footer{
position:absolute;
bottom:0;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="sitecontainer">
<div id="contentcontainerone">
Some content <br />
Some content <br />
Some content <br />
Some content <br />
Some content <br />
</div>
<div id="contentcontainertwo">
<div id="footer">Footer</div>
</div>
</div>
</body>
This is the link to the page: http://www.smsidat.com/test/index.html
What I basically want to achieve is that the website should always be 100% height wise and so stretch to the bottom of the browser window or where the content ends if it's of greater height with a footer at the bottom. So ideally, the div with the blue border should remain within the wrapper which has the black border and stretch no further than the bottom of the browser window or the end of the content if it's greater.
Would appreciate any ideas how to fix this, thanks.
Here the solution:
html, body
{
height: 100%;
overflow: hidden;
}
#sitecontainer
{
height: 100%;
position: relative;
}
#footer /*OUTSIDE THE CONTAINER */
{
bottom: 0;
position: absolute;
height: 50px; /*change this*/
}
Using the <table> tag is indeed not recommended for layout.
CSS3 has many ways to solve this as described above (use 100% height for the container and their parents all the way to the html tag). There are cases (ref: Eric Meyer, Smashing CSS book) however, when the CSS display: table-cell style attribute can be appropriate for layout ... such that at least it puts the layout control back in the CSS versus the content as a best-practice.
Trying to align a DIV at the bottom of another div can be tricky. There are hackish ways to accomplish this but I would recommend just using a table.
<table>
<tr>
<td><div id="header"></div></td>
</tr>
<tr>
<td><div id="content"></div></td>
</tr>
<tr>
<td><div id="footer"></div></td>
</tr>
</table>
Then use CSS to define the heights of each DIV, with the content DIV stretching with the page until overflow occurs while the header and footer DIVs stay at their original heights.
I'm trying to BOTTOM align an image in a fixed-height block:
div { float: left; width: 100px; height: 100px; line-height: 100px; }
div img { vertical-align: middle; }
...works in modern browsers, except IE! IE sucks no wonder, but I really need a fix, if possible.
Edited to add: Can't use tables or background image.
Many thanks
Why can't you just position:relative the division, position:absolute and mess with bottom/left properties?
Or toggle it's position to inline-block and play around.
As much as it pains me to say it and at the risk of being drawn and quartered by the purists out there, the most reliable way to vertically align something in a universally compatible way is to use a table.
table {
float: left;
width: 100px;
height: 100px;
line-height: 100px;
}
<table cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom"><img src="foo.jpg" /></td>
</tr>
</table>
Simplest way to do this is to use in the DIV style="background:url(...) no-repeat center bottom" instead of IMG tag.
I can´t find it right now, but I saw something positioning the element at 50% (the top) and then giving it a negative top-margin of -50%.
Just for the vertical alignment obviously...