We have a CSS table - made by CSS & DIVS.
The right-side menu is fixed at 20%, & this appears to be working properly...
in the middle of the screen, we have a table of 4-5 rows of information. The top line of the table is a link on each column, for sorting.
it only has a few lines of data (we will add 'pages' in later, when we get more data)
The problem, is that when the page refreshes when we select a link, (the SAME sort, or another sort - or just refresh the screen),the middle table "jumps" left or right.. it doesn't stay in the same position on the screen & is very annoying..
The CONTENT of the table itself is the same width - the table size doesnt change. but the table itself shifts position...
http://animals.kwister.com/directory/region
(try the links on the top of the table).
Is there a way so the table is "fixed" to the 'center' of the available space - reduced by the right menu / right side bar.
Of course, as i add more data / text - The width of the table will increase to cope, but it will remain 'centered'.
We may add a left menu / div in future, we're just developing this site & its not much to show as yet. This is the 1st time ive seen a css table 'shift' like this.
Its caused by the table-layout fixed, and the fact that you are adding the side panel with js.
You should probably look into using a CSS grid like bootstrap's for a more consistent layouts. or make your own with display: block, float: left, and widh: x%;
.column-left, .column-right {
display: block;
width: 20%;
float: left;
}
.column-center {
display: block;
width: 60%;
float: left;
}
or you could do a quick and dirty css fix on the right hand column and position it absolute:
display: block;
width: 20%;
float: left;
I noticed that the "messages" area is loaded at runtime using JavaScript.
Initially there is no content in the div:
<div id="messages" style="float:right; display: inline; width:20%;"></div>
Perhaps you can try to add nbsp; inside the div like this.
This might make the "20%" width to work.
<div id="messages" style="float:right; display: inline; width:20%;"> </div>
What I saw is that after the first page load the table is centered to the whole window, as if the "messages" div was not there (which is correct, because its content is loaded afterwards).
Then, when the content of the "messages" is present, the table centers to the remaining width.
Related
I have a "Contact" section on my website, and I have a form section and a contact info section as two separate divs. The form acts just fine, but for some reason I can't get the contact info section to simultaneously stay on the right side while becoming less wide. I have an image so you can understand what the issue is: http://i.imgur.com/smjnXw1.png
I want them to be aligned horizontally next to each other. Thank you!
Assuming your form is correct since I can't see your code, you can edit the css.
#form{
width: 500px; /*fill in the width and height*/
height: 500px;
float: left;
}
#contact{
width: 500px; /*fill in the width and height*/
height: 500px;
float: left;
}
by default divs are as wide as they can be unless specified and a block element, so your #form is taking up the entire width space. Here is an example fiddle of what I think you're trying to achieve.
http://jsfiddle.net/valleydigital/j3qpeaym/
I think the solution is to apply a float:left to both your form and your contact info section. This way both of these will sit next to each other horizontally. Floats have normally been used to allow text to flow around an image, but sometimes they can be used to position items as well.
Check this out for some information and there are more informative links at the end of the floats post:
http://codemecrazy.wordpress.com/
Increase the size of the div in which u place the form div and contact div. Also give style with float left property.
<style>
#form #contact
{
float:left;
}
</style>
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459
I have a layout template made to have a top banner, a left side menu and a content area to the right of the menu. I'm trying to figure out how to keep the 'application_layout_content' div from dropping below the 'application_layout_menu' if the browser window is narrowed. I'm not sure if I was doing this the right way to begin with; otherwise it seems to work fine.
(looking at IE7/IE8 mainly), I've played around with 'overflow' and 'position' properties but either will cause problems in one version or the other. Like 'Overflow: auto' will work in IE7 (main content div won't drop below the menu div), but in IE8 it will cause a greyed out vertical scrollbar and the main content div will still drop below the menu div.
Thanks!
#application_layout_header
{
background-image: url('../hHeader.jpg');
background-repeat: no-repeat;
height: 103px;
}
#application_layout_menu
{
width: 205px;
float: left;
}
#application_layout_content
{
float: left;
}
I don't think you can accomplish this as long as you have a fixed width defined for #application_layout_menu. Try making it a percentage value.
try setting a min-width on #application_layout_header
I have a problem with my website and how it appears in some browsers:
http://www.karentiede.com
In Firefox 2.0 and many other browsers, the "content" column overflows to the left and appears on top of the decorative border, making some of the content unreadable.
One Q&A in here suggested that making all the pages HTML 4.01 Strict DOCTYPE might help make all browsers work the same, but that question was the reverse-worked in Firefox and didn't work in IE. Is there another/different fix I should try?
From the CSS:
.column2 {
float: right;
width: 80%;
}
From any of the pages that act up:
<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">
When I check the site in http://www.browsershots.org, it looks bad on initial display in a lot of the browsers. I've had one or three (probably Firefox) readers tell me they couldn't see the text and I suspect they were probably more sophisticated users than I am a CSS-writer.
I took a look at the page and the problem only appears when you re-size the page.
The problem is your right div is 80% so when the screen becomes smaller and ratios change and that 80% then overlaps into your left background.
Take a look at http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ to see how to set up a "static-fluid" layout.
The reason why this is happening, it seems, is because the image (floated left) isn't the height of the entire page. So, when the page isn't wide enough to accommodate both the image and the text next to each other, the text breaks to the next available whitespace.
Try floating both elements to the left, and apply a left-margin equal to the width of the "decorative" column to column2 as such:
.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }
You'll need a clearing div below both elements:
<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>
The problem is definitely ratios, as pointed out by savageguy. If what you are wanting is a fixed-width left column with a variable width right (main) column then you could use this (not tested but should work):
#col1_schedule_toc {
width: 175px;
float: left;
}
.column2 {
float: right;
width: 100%;
}
EDIT: Incidentally, I noticed that (at least on the page I looked at) you also aren't closing the left column before you open the right, so technically the right column is inside the left, which will cause issues with my suggested fix. So you also need to move the closing div for col 1 so that it's above the opening div for col 2.
EDIT 2: Plus, as pointed out by Plan B, you'll also need a clearing div beneath both elements to prevent the parent (container) div from collapsing:
div.clear {
clear: both;
font-size: 1px;
line-height: 1px;
overflow: hidden;
}
In addition to savageguy's right-on-point advice, the image you have in the page (your picture, etc.) to the left is a fixed width. This is why, when the browser is re-sized, that 80% suddenly becomes too wide.
On column2, setting a left margin of the width of the image + the amount of separation you want (for example, 160 should work, but you can play with it), then making the width of the column2 100% (of the remaining width) should prevent your overlap.
[Edit: Plan B also offers a very robust solution.)
I would like to position three items in CSS using float.
In the top left--logo
To the right of the logo, the navigation, which is an unordered list, ie floating left.
In the top right, a 2 line sign up for newsletter field--copy top row and form field with submit bottom in the second
I've given each it's own Div tag but can't see to get it to work with float. Only absolute positioning which doesn't look good when the site is resized. I put a table inside the div right now but would love a pure CSS solution.
I can get the logo to float left and the sign up field to float right but can't seem to get the navigation properly positioned. Either it goes all the way left or I put a clear in and it goes below the logo and field.
Any suggestions would be appreciated.
What about the following?
.floatleft_logo
{
float: left;
width: 200px;
}
.floatleft_nav
{
float: left;
width: 600px;
}
.floatright_email
{
float: right;
width: 300px;
margin-left:-250px;
}
Put all three in a 850px-wide container div and this works for me in a test page.
If I've understood it correctly, maybe you could set the first and second element to float: left, and then set the margin of the third element equal to the width of the first and second?
You could also set the first element to float left, the third to float right, and the second with a margin equal to the width of the first element. Like a three-column layout.