I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
Related
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
I have a <div> container with a certain max-width,
max-width: 300px;
margin: 4em auto;
border: 1px solid black;
that contains two things: 1) text, 2) a floating div with
float: right;
width: 150px;
See my example at http://jsfiddle.net/uXEBR/.
When you reduce the window’s width, the floating <div>, as expected, extends outside the containing <div>, getting beyond its left border. However, I would like it to decrease in width so that it never leaves the outer <div>’s border. In other words, the width specification of the floating element should be conditional on sufficient width of the outer div. Is there a way to achieve this in CSS?
The other option is a media query. Here is an example based on the code you supplied. Keep in mind that .divright element will only shrink as small as the longest word in the div.
>>jsFiddle<<
CSS:
.divout {
max-width: 300px;
margin: 4em auto;
border: 1px solid black;
}
.divright {
float: right;
max-width: 150px;
margin-right: 1.25em;
border: 1px solid black;
}
#media screen and (max-width: 225px) {
.divright {
margin-left: 1.25em;
}
}
Sure:
width: 50%;
max-width: 150px;
I have links with bottom border, in CSS like this:
a {
display: block;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;
}
I have problem because the 'padding' value is getting added to the width value and border bottom is too long:
http://screenshooter.net/9186066/advygxa
Have you any idea?
Padding and width have a hard time coexisting; simply remove your width declaration. Since your anchors are block, they will automatically take up 100% width (including padding):
a {
display: block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;
}
Now it should take up a 100% width.
That's what padding does. Look at how the layout model works: adjust accordingly. If you're looking for a flexible solution then you need to remove the padding from the a element and add something like an internal span that has the proper margin within the a and other dials adjusted accordingly.
Add this to the div that contains the links.
overflow-x:hidden;
Demo: http://jsfiddle.net/calder12/zXmG3/
It's working fine, check http://jsfiddle.net/GjMQe/
a {
display: block;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
border-bottom: 1px solid #EEE;
}
Perhaps you forgot to include a reset.css file in your template.
Check Normalize.css
I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)
Image: http://imgur.com/O3ra9
Code: http://jsfiddle.net/gh55e/2/
So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.
Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:
http://jsfiddle.net/gh55e/4/
CSS:
#right {
width: 85px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-top: -54px;
}
For later visitors, this is the CSS that eventually fixed it.
#right {
width: 385px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-left: -10px;
}
You basically make a margin of 10px and move it back for 10 px
I am building a 3 column fluid layout, and have gotten 90% the way there. I am wondering on what is the best way to impliment the background, or side bars - however you want to look at it.
I have a good box hack that centers my main content area, and now I need to impliment the two stripes you see on either side that has a small 1px border on the respective inside border.
I could create a 1px high stripe that is 1000's of pixels wide, but I have a feeling there is a much better way to do this - possibly with pure CSS?
Am I now looking at a 5 column layout here, or is this still a three column fluid?
If anyone can provide a good pattern or link for this style of layout (its probably the most common out there nowadays, huh?) I'd really appricaite it!
Here is my current fluid wrap code:
css:
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
}
HTML
<body>
<div id="siteWrapper">
</div>
</body>
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
background: whatevercolor;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
border-left: whatever;
border-right: whatever;
}