I'm trying to create liquid layout, so that the left side of the site expands based on the screen size, while the right side stays a fixed width. This works fine in IE, but in Chrome the left side is only expanding the length of the content within, not the full length of the space.
#bbContent{width:100%; min-width:829px;}
#leftActivity
{
float:left;
margin-right:334px;
min-width:421px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:right;
width:320px;
margin:18px 14px 0 -334px;
}
Is this what you are looking for?
http://jsfiddle.net/KnVrA/1/
it makes sense for leftActivity not to expand since it is floating, if the content is not that long then it would not expand
Edit: Used Kyomu's fiddle and took out some stuff and rearranged some stuff
Update: using percent based http://jsfiddle.net/KnVrA/2/
you can add wrappers inside of the left to create padding on the right side
I corrected the solution by adding a wrapper around the left side, and removing the float from #leftActivity. Adding a negative margin on the wrapper, and removing the negative margin from the right side.
#leftWrap{float:left; width:100%; min-width:421px; margin-right:-334px;}
#leftActivity
{
margin-right:334px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:left;
width:320px;
margin:18px 14px 0 0px;
}
Related
Problem
I have a header with the basic HTML structure
<div id="header">
<div id="logo"></div>
<div id="navigation"></div>
<div id="userInfo"></div>
<div class="headRight"></div>
<div id="callCenter" class="headRight"></div>
</div>
I cannot change the HTML. Currently it is laid out with floats, and navigation was aligned to the bottom of the header using padding-top. However, it only works when userInfo is 2 lines, and it can be 3 or 4.
What I need to do
Using only CSS, align navigation to the bottom for all nav heights while maintaining the original layout.
What I've tried
Half a dozen stack overflow solutions including the classics position:absolute and vertical-align:bottom on parent. (The former breaks the document flow, and the latter seems not to work because other elements get in the way.)
The fiddle
Cleaned fiddle best I could, but inspect will probably still be easiest.
https://jsfiddle.net/ohrhe4u5/1/
Notes:
The tabs should just touch the bottom of the header.
callCenter is misaligned in this example as well, but you can ignore. It's much lower priority.
New fiddle
I changed header, logo, and navigation to display:inline-block, allowed userInfo to float right, gave the nave extra height to make sure there's always room, and absolute positioned the headRight items.
That leaves me with this. A little janky due to the absolute positioning and forcing the nav height larger. Any better ideas?
https://jsfiddle.net/ohrhe4u5/2/
I generally dislike float for positioning where i can help it (this is a personal preference because i find it sometimes painfully unpredictable), as such, using a combination of position:absolute, min-height and margin i believe i have recreated what you're after.
Basically this solution works by position:absolute'ing the elements that we have some idea of consistent sizes of (the logo and the navigation), then have the header element take its height from the user data and links on the right. We add a min-height to the header element though so that should the user data be reduced to 2 lines, the height is still enough to accommodate the absolutely positioned elements (given they no longer affect the height of the header element by being absolute).
JSFIDDLE
CSS
/* new parts of the css */
#header {
min-height:112px; /* in case user data is made smaller */
padding:10px 10px 0 20px;
position:relative;
}
#logo {
width: 210px;
position:absolute;
top:50%;
width:210px;
height:62px;
left:20px;
margin-top:-32px;
z-index:1; /* bring logo above the user data */
}
#navigation {
position:absolute;
bottom:0;
left:210px;
font-size: 20px;
height: 40px;
z-index: 1; /* bring navigation above the user data*/
}
#userInfo table{
margin:0 0 0 auto;
}
.headRight{
text-align: right;
padding-bottom: 0.2em;
}
I'm working on a responsive website and I'm coming across a problem. I've a div container which width is 100%, and inside it I've 2 div's sidebar and content. Sidebar is set 40% wide and content is set to 60%.
Now, I want to give 25px space between them and for that I used margin-left:25px;.
Now, what will the width of content in % or is there any formula to calcute?
Here is what I am to do - JSFIDDLE
You could change your CSS to use calc for the width values, you want to subtract 1/2 the amount of the gap in px you want, then add the same amount to the relevant margins:
Demo Fiddle
.container {
background:#ccc;
}
.sidebar {
width:calc(40% - 12.5px);
margin-right:12.5px;
background:red;
height:50px;
float:left;
}
.content {
width:calc(60% - 12.5px);
margin-left:12.5px;
background:green;
height:50px;
float:left;
}
Yes, there is a way to achieve this using calc function.
.content {
margin-left:calc(40% + 25px);
}
But, the disadvantage is that, calc is not cross browser. It won't work in IE.
See updated fiddle here.
I want to position a comments container relative to the post container . But the Post text can be of different size so i made it auto height . same for the comment container as it can contain any number of comments . but if i position the comment container as
#wallwrap .comment_container_out
{
position:absolute;
width:150px;
bottom:-15px;
left:80px;
}
it concides the bottom of the comment container to the bottom of the post container so when the number of comments increase , the height of the comment container also increases but it expands to upward direction while i want it to expand in the downward direction.
The post container is
#wallwrap .text_post
{
position:relative;
left:20px;
font-size:10px;
font-family:Helvetica,Arial, sans-serif;
color:#000;
background-color:#fff;
padding:5px 10px;
width:220px;
}
The crux of your problem is that you're using position:absolute, which will remove the element from the normal HTML "flow". When you then set it to "bottom: 0", it will always fix itself to the bottom of the container, but grow vertically upwards.
Why are you trying to position it absolutely? Position:absolute should always be a last resort. If you're just trying to separate the post area from the comments, I would simply add a margin-bottom to the post area.
I have a site which has several different options for left and right containers and a centre.
The left div is always the same size, however some times it's not shown.
The right has 3 options, small, normal or wide. Only one rightside will be shown at once, but some times there's none.
The center should adjust to the left as well as the right side taking up as much space as possible but not push the right div to a new line (as it does with width:100%)
Is this at all possible? Having a div just, doing what you want it to do without having to tell it how?
I made an example in Fiddle in case my explanation was unclear: http://jsfiddle.net/WDZFx/13/
Thanks in advance!
Jennica, here's a sample http://jsfiddle.net/uQ4TH/ , but it has the same problem I mentioned earlier, the center one will expand only according to the contents, though the maximum possible will be 50%;
Make use of percentages instead of specifying the individual widths for the left/center/right:
Modify your css as:
#Wrap {
width:100%;
}
#Left {
width: 10%;
float:left;
background-color:pink;
}
#Center {
width: 30%;
float:left;
background-color:beige;
}
#Right {
width:60%;
float:left;
background-color:silver;
}
I have a 3 column table layout with the center column being position:relative;
inside the center column I have a form which needs to be position:fixed; (well, unless there is another way)
What I need is the form to have a liquid width when the browser widens, but it also needs to stick to the bottom of the page. So, if I use position:fixed; it stays at the bottom, but it overlaps the right sidebar. If I use position:relative; it stays between the sidebars like it should, but it scrolls with the page.
I made a little jsfiddle but it doesn't display fixed positioning. But you can see my code. http://jsfiddle.net/winchendonsprings/S5zkm/1/
Here you can see it overlap the right sidebar. http://i.imgur.com/awp07.png
#center {
padding: 0 15px;
background-color: green;
position:relative;
}
div.main {
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
You can try that (absolute positioning within relative positioning parent).
Play with the top and bottom values to position it vertically.
(It should resize with the window horizontally).
Is that what you want?