Can someone please check this JSBIN
I'm trying to get rid of the white space left to Home Terms and Conditions-Affiliate Program-Our Company so that it will align on same row as sitelinks
Try adding this to your CSS:
footer .row > div {
clear: left;
}
It will make your sections "watch out" for any floating content above, and render below it.
If you want a nice way of doing stuff like this when working with float layouts in the future, read this article. It's a common "hack" for web developers and it's good to know about it.
EDIT AFTER OP COMMENT:
You have set float: left on your headers (<h4>-tags). Remove that. And then make the sections that contain the headers float instead:
footer .row > div {
float: left;
}
Related
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.
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 have designed a navbar for my website; you can see it at http://jsfiddle.net/ToddStyles/D2tZH/.
What CSS I would use to change the spacing between them? I used an unordered list to make it and changed the display to inline.
When you are displaying elements inline, HTML will parse any whitespace as a spacebar character. So, you can either comment out the space between list items, i.e.:
<li>...</li><!--
--><li>...</li>
Or, display them as block level elements and float them:
ul {
overflow: hidden; /* To prevent collapse */
}
ul li {
display: block;
float: left;
}
With regards to the Fiddle you have posted, you have used the <img> tag incorrectly. It is self-closing, and it should not be used to nest anything.
p/s: And please, don't use link shortener just because SO prevents you from posting a Fiddle link due to a lack of code. The rule is there for a reason — providing us code gives your question context.
If you’re looking to increase the width, you can apply a left margin to consecutive <li>s easily:
#navbar li + li {
margin-left: 0.2em;
}
Here’s your fiddle back. I fixed it to use inline-block to make the layout break less when it inevitably wraps on a smaller screen. And do take into account that we can’t see images on your computer across the internet.
I'm trying to create a "grid" of "blocks" that when hovered over will reveal some text in a div beneath it. In the example I've got everything how I'd like it but- is there a way to make it work in the arrangement I have it in?
What I'd like is for only the bottom div to push down (like the bottom-left one in the example) when the one above it is "expanded". But obviously I'm not getting something right since it creates a giant gap and it's not showing the animation either.
The way the bottom div reacts in the second column is not what I'm going for, though.
Any ideas?
Thanks, appreciate it!
http://jsfiddle.net/nbFkZ/
Through your comments, i think i understood your question finally:
What I've done:
I've moved the second and third li into a new UL-elements.
And let both UL elements float to the left.
The HTML is a bit to much to post here, so i just post the CSS:
ul.things {
list-style: none;
float: left;
width: 240px;
}
ul.things li {
display: inline-block;
/*float:left;*/
margin:15px;
}
HTML, CSS & Live Demo: http://jsfiddle.net/nbFkZ/4/
Hope it helps :)
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