I have an element( 2 anchors next to each other) inside the div(spans about 1150px so you need to scroll down to see all the contents of this div). This anchors are position:fixed at the top of this div so as you scroll down the div anchor will be visible all the time.
My problem is when you shrink the width of the browser window, I want second anchor to go below the first one as the space runs out, however until the browser window physically reaches the anchors, no wrap around is happening, so div is getting smaller and two anchors are overlapping each other.
When I remove the position fixed, as I resizes the browser window and div's width shrinks one anchor wraps below the other one as expected. So I am guessing I just need y-axis fixed but not x-axis.
The position attribute applies to the element as a whole. What you're really asking is for a new kind of position attribute.
You could apply the fixed positioning to an element that contains your two anchors, and if your anchors are set to float, they will wrap if they need to:
<style type="text/css">
#fixed {
position: fixed;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
...
<div id="fixed">
<div class="left">Lorem ipsum dolor sit amet,</div><div class="right">consectetur adipiscing elit.</div>
</div>
<div id="content">
<p>something here...</p>
</div>
A similar question about fixed-y / scrollable-x was the subject of an earlier discussion whose conclusion was you need JavaScript to do it, as others have said.
The general approach in that answer was to look every tenth of a second or so to see if the elements should be moved, and then to move them if so.
Looks like this may be a possible duplicate of this question.
In a nutshell, you can't do this with purely CSS. You'll need JavaScript. I recommend jQuery.
Related
I have a div that is fixed to the top of the screen. In the div there is a search area where you make ajax calls and fetch data into the div, and that changes the div height.
Also there is another div called "ThingsToAlign". I want to align this to the bottom of the fixed-top div.
Any one knows how to do this? I tried vertical-align or float: top but none of them are working.. Thanks.
<div className="container-fluid">
<div className="navbar-fixed-top">
<SearchArea />
</div>
<div>
<ThingsToAlign/>
</div>
</div>
In bootstrap the class navbar-fixed-top has the following properties.
.navbar-fixed-top {
position: fixed;
top: 0;
}
p.s: I was coding in react.js so that's why you see "className" instead of "class"
First, your HTML attribute className is incorrect (in standard HTML). It should be class.
Second, you should try to stay away from using angle brackets to surround demo text. The browser will consider it a tag and ignore it (i.e., it will be invisible when rendered).
Your question is not entirely clear to me, but from what I understand this demo may be helpful: http://jsfiddle.net/kdbsm3hz/
Otherwise, you may find a solution in other similar questions:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Position DIV below fixed div with variable height
Placing a scrollable div below a fixed div of variable height
Scrollable div beneath a variable height header
Creating a variable height "fixed" header in CSS with scrollable content
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
I have a number of divs with the same class, that I want to align vertically inside their container div.
The html part looks like this example:
<div id="container">
<div class="element">
........
</div>
<div class="element">
........
</div>
<div class="element">
........
</div>
</div>
I have floated the elements (divs with .element class) 'left' so they are all on one row. So far so good no problem yet.
The contents of the .element div vary. Now by default, they are aligned top, and I want to align them to the bottom using this css:
#container {position:relative;}
#container .element {position:absolute;bottom:0;}
Works and does align them to the bottom, but unfortunately it also sticks them together and they all look like they are in one place as one div, the one on top of the other.
Trying to set width, margin, padding etc.. to the .element div does nothing, they just act as one div.
What do I need to do to separate them ? I believe giving each div a separate class is not the right solution.
I also would not like to use table solutions, unless there is absolutely no other way.
I have tried vertical-align:bottom which for some reason does nothing.
I kept searching for long about this but nothing related comes up on the net, so if it's a duplicate I apologize.
Thanks in advance.
Well this is what the position:absolute is all about. I don't see why you use it.
If I understand right you want to vertical align the divs to the bottom and have them appear next to each other / beside each other ? Then most likely you have to modify the display css attribute of your divs to display:inline-block; or even use span tags instead.
You could wrap the #container div with another div, set its position to relative, and set the position of #container to absolute and it's bottom to bottom: 0
See my example
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.