I appreciate this maybe a simple question but I cannot find the answer.
I have a div. Inside that div I have 3 columns (made up of divs).
The 1st div has some text in it and the 3rd div had some text in it as well. I want the middle div to take up all the remaining space.
I have played around with absolute,fixed and relative positions.
This is what I mean:
<div id="divheader">
<div style="float: left; width: 85px;">Caption to the left</div>
<div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
<div style="float: left; width: 185px;">caption to the right</div>
</div>
<div id="divpage">
stuff
</div>
<div id="divfooter">
footer stuff
You could float the last div right and not worry about having a div in the middle if you are not using it for any purpose.
<div>
<div style="float: left; width: 85px;">Caption to the left</div>
<div style="float: right; width: 185px;">caption to the right</div>
</div>
You can use the table-cell display for this exact purpose.
HTML:
<div class="divided">
<div style="width: 85px;">Caption to the left</div>
<div>this div has no caption but I want it to take up the remaining space</div>
<div style="width: 185px;">caption to the right</div>
</div>
CSS:
.divided {
display: table;
}
.divided > div {
display: table-cell;
}
jsFiddle Demo
Browser compatibility: Works great with modern browsers.
You can make use of the display table (the advantage of doing it this way is that it will also keep all three columns the same height):
<div style="display:table; width:100%">
<div style="display:table-cell; width: 85px;">Caption to the left</div>
<div style="display:table-cell;">this div has no caption but I want it to take up the remaining space</div>
<div style="display:table-cell; width: 185px;">caption to the right</div>
</div><br />
Or if you want it to be more compatible with older browsers then you can use padding and negative margins:
<div style="padding:0 185px 0 85px">
<div style="float: left; width: 85px; margin-left:-85px;">Caption to the left</div>
<div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
<div style="float: right; width: 185px; margin-right:-185px;">caption to the right</div>
</div>
Example Fiddle
Related
I found an answer here that addresses what I need to do, but it doesn't seem to work perfectly for me. I have sidebar divs floated left and right. I want to stick a div in the middle and fill the space. The technique in that answer works for the left div, but it pushes the right div down to the next line. I threw up a quick demo on CodePen to show the problem.
Can anyone suggest a way to fix this so that all the divs are on the same line?
Update: I realize I could do this easily using percentages for all the div widths, but I really need to maintain static widths for the sidebars.
One way to do this would be changing the order of your HTML (placing the right sidebar before the left)
<div class="page-grid">
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div id="content">Content area</div>
</div>
http://codepen.io/anon/pen/kHmjd
This is using an example from Dynamic Drive's CSS Layouts
I like this one, especially because it preserves the order of the content semantically. Main content is delivered first, followed by both side columns.
HTML
<div class="page-grid">
<div id="contentwrapper">
<div id="content">Content area</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
</div>
CSS
#contentwrapper {
float: left;
width: 100%;
}
#content {
margin: 0 15em;
}
.sidebar {
float: left;
width: 15em;
}
.sidebar.left {
margin-left: -100%;
}
.sidebar.right {
margin-left: -15em;
}
I have a responsive page that has this section:
<div id="team">
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
</div>
#team {
width: 100%;
margin: 0 auto;
}
#team .person {
display: inline-block;
text-align: left;
cursor: default;
margin: 0 3em;
}
team has 100% width. I need to align team to center of the page depend on page width. But children person should be align to left inside the team.
So when we have some person that not fill a row, it should be align to the left.
Can you please help?
margin: 0 auto; really only works on fixed width elements. You cannot expect a div set at 100% width to be centered with it.
If you're wanting to center the contents of #team, you can simply apply text-align: center;. This will apply to your .person divs since you set them as display: inline-block;
Check out the results of text-align: center; here to see if it's what you're looking for: http://jsfiddle.net/Chs9X/
I'm trying to position two panels and just can't get it to work...
I have a container-page wrapping two panels, each with it's own page. I want to position the panels side by side using float.
This is my CSS:
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: static;}
and HTML
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
</div>
I have to use position:relative for the left panel and position:static for the right panel. Strangely this works in JSBin but in my actual page, the right panel with position:static always has 100% width covering the whole screen.
Any hints on what I may be doing wrong?
Thanks!
div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it's children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.
On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: relative; float: left;}
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div style="clear:left;"></div>
</div>
Try floating both of the panels? As of right now only the left one is floated... try floating both of them to the left and then putting the correct amount of margin between them to line them up like you want them. Or even floating one left and the other right would probably work.
Add this to your CSS,
div.clear-both {clear: both;}
And change your HTML to this:
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page"
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div class="clear-both"></div>
</div>
I have some HTML codes like
<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px"></div>
<div id="content">Here goes some text</div>
I want the middle div (#bottom) to be positioned on top of the div (#top) and while doing so, the #content div should automatically move up by 50px.
If i code like
<div id="bottom" style="height: 50px; position: relative; top: -50px;"></div>
the #bottom div do moves up but the #content div stays behind.. leaving a 50px gap between.
So how should I position it??
If I'm understanding correctly, you want to take #bottom and remove it from the regular page flow, placing it over-top-of #top.
Two ways to take an element out of the regular page flow are position:float; and position:absolute;
Not knowing what the rest of your page looks like I suggest something like:
<div id='container' style='position:relative'>
<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px; position:absolute; top:0em; left:0em;"></div>
<div id="content">Here goes some text</div>
</div>
That will put #bottom in the top, left-hand corner of #container, which is also where #top will be. #container being part of the regular page flow will be right below #top.
For centering an absolutely positioned element you can do like this:
<div style="display:table; margin: 0 auto;"> <!-- display:table; to 'shrink-wrap' the div - margin: 0 auto; to center it->
<div style="position: relative; float:left;"> <!-- float also shrink-wraps -->
<div id='top'>top div content</div>
<div id='bottom' style="position:absolute; top:0em; width:100%; text-align:center;"> content of bottom div </div>
<div id='content'></div>
</div>
</div>
Each column has a fixed width of 200px with a 20px margin.
The top-left box and the columns have variable height.
Like this
Tor Valamo kindly provided an answer to a similar question (that being elastic, this is fixed), but I cant centre the layout, as it uses position: absolute.
How can I do it? I know that using a table with colspan and rowspan the answer to this problem is trivial, but I would like to avoid table-based layout like the plague!
Not sure I understand exactly what you're asking, but something like this...?
<div style="float: left;">
<div style="width: 420px;">top</div>
<div style="width: 200px; float: left;">bottom left</div>
<div style="width: 200px; float: left;">bottom right(ish)</div>
<div style="clear: both;"></div>
</div>
<div style="width: 200px; float: left;">big left box</div>
<div style="width: 200px; float: left;">big right box</div>
You can still use the layout that you linked to and have it be centered, despite the position: absolute. I've adapted it for you here (you'll have to tweak to add in the margins, but it works, I tested it:
<html>
<head>
<style>
#outer, #left, #right, #top_left, #bottom_left,
#bottom_left_left, #bottom_left_right, #right_left, #right_right {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid #000;
}
#outer {margin:0 auto; position:relative;width:800px;}
#left {right:50%;width:400px;}
#top_left {position:relative; width:400px;}
#bottom_left {position:relative;}
#bottom_left_left {right:50%; width:200px;}
#bottom_left_right {left:50%; width:200px;}
#right {left:50%;}
#right_left {right:50%; width:200px;}
#right_right {left:50%; width:200px;}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="top_left">Top left</div>
<div id="bottom_left">
<div id="bottom_left_left">Bottom left</div>
<div id="bottom_left_right">Bottom right</div>
</div>
</div>
<div id="right">
<div id="right_left">Near Right</div>
<div id="right_right">Far Right</div>
</div>
</div>
</body>
</html>