This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Make Div on right side fill out all available space
I'm designing a theme for a blog and I'm having some trouble trying to get a layout working. Here's an image of what I want.
This diagram represents the individual posts and not the website itself, so it will be contained in a box of it's own, lets call it .container. Also the purple and green are in another box, let's call it .content. The other elements will be called by their color for now.
so here's more or less what the CSS looks like:
.container {
display:block;
margin:0 25px;
}
.gray, .blue, .content {
display:block;
width:100%;
}
.purple {
display:inline-block;
width:125px;
height:100%;
text-align:center;
}
.green {
display:inline-block;
}
That's all there is at the moment. I tried float but that made no effect. What's happening is something like this.
Here's a few more things you should know:
.container's width is NOT set it is auto
.purple and .green don't necessarily need to be the same size as long as .green doesn't go to that side.
.purple CAN have a set height
.green is where the meat is, that's where the actual post goes, keep that in mind.
I don't think tables will help, the problem is inside .content.
Use answers in this post to get a solution:
Make Div on right side fill out all available space
I am recommending tables-directed one because it is most valid/working approach on almost every browser.
I assume that all of your sections are <div> elements. Use:
.container {
display:block;
margin:0 25px;
}
.gray, .blue, .content {
display:block;
clear:both;
width:100%;
}
.purple {
float:left;
width:125px;
height:100%;
text-align:center;
}
.green {
float:left;
}
You may also need to add <br clear="all" /> immediately after the green div and before the closing of the content div, and another one right after your content div.
Assuming all is set in div you need to write like this:
.container {
display:block;
margin:0 25px;
}
.gray, .blue, .content {
display:block;
clear:both;
width:100%;
}
.purple {
float:left;
width:125px;
height:100%;
text-align:center;
}
.green {
float:left;
min-width: 125px;
}
Related
A basic sounding question I can't find an answer for.
Making an element stretch to use the remaining width of a page is nothing new. Same with changing side by side elements to be stacked on small screens. These are both situations that allow you to pick the element order/composition (E.g. float: direction; and DOM element order for top/bottom) but how do you set the order when doing both? I guess you could say I want to control my element stack overflow. wink wink nudge nudge
The "block formatting context" trick has gotten me so close to what I want.
html:
<div class="blue">Some navigation list items.</div>
<div class="red">Search box expanding to cover empty space.</div>
css:
.red {
width:auto;
height:150px;
background:red;
min-width:200px;
overflow:hidden;
}
.blue {
height:150px;
width:300px;
background:blue;
float:left;
}
http://jsfiddle.net/A8zLY/5503/
In my case, how do I get "red" (the dynamicly sized box) to be on top when it meets its threshold (min-width)? I can't use a media query as navigation list items can change.
Well, here goes.
Although I am not sure what you are trying to accomplish and this solution might not fit your layout needs, here is a solution to the problem - switch the position of the two elements and add this css:
html, body {
padding:0;
margin:0;
}
.red {
position:relative;
margin-left:300px;
height:150px;
background:red;
}
.blue {
position:absolute;
left:0;
top:0;
height: 150px;
width: 300px;
background: blue;
}
#media (max-width:300px) {
.blue {
position:static;
width:100%;
}
.red {
margin-left:0;
}
}
http://jsfiddle.net/A8zLY/5506/
I used a media query breakpoint to wrap the two elements.
The only way for elements to be placed on top of others when they are wrapping is to be placed first in the HTML markup.
I have read other posts on stack overflow but none of them have worked so far. The issue I am having is that 2 divs will not sit side by side.
I have a main content div and I have a small appbar div I am trying to put directly to the right of the content.
Everything I have tried has caused the appbar div to go under my footer, or caused the content to go under the container.
#appbar {
width:300px;
background-color:orange;
position:relative;
}
#content {
color:black;
width:500px;
}
footer {
height:10%;
opacity:0.8;
text-align:center;
}
Id put both the appbar and the content inside a container/wrapper div set to 800px width. Then float both the content and the appbar to left Float:left; then on the footer use clear:both. Bear in mind that the elements will sit side by side , if you want a bit of spacing between them use paddings or margins.
Try floating your elements like this:
#appbar{
float:right
}
#content {
float:left
}
#footer {
position:absolute;
clear:both;
Use display: inline-flex; in content and appbar.
#appbar {
width:300px;
background-color:orange;
position:relative;
display: inline-flex;
}
#content {
color:black;
width:500px;
display: inline-flex;
}
footer {
height:10%;
opacity:0.8;
text-align:center;
}
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
I'm trying to make a kind of menu where consists of many DVD covers. When the cursor is positioned over each cover it will show the complete title name in a single line (not wrapped inside the cover container). How can I align the title right in the center of each cover.
Note: I would like to place the title a bit above the cover, not completely over it.
Here is the HTML example:
<div id="cover"><span>Here is the title in a single line!</span></div>
Here is the CSS:
#cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#cover span{
position:absolute;
background-color:#0f0;
display:none;
}
#cover:hover span{
display:block;
}
JSFIDDLE: example
When the cursor is positioned over each cover it will show the
complete title name in a single line (not wrapped inside the cover
container). How can I align the title right in the center of each
cover.
I think this will take care of it.
Codepen.io Demo
CSS
.cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span{
position:absolute;
background-color:#0f0;
display:none;
color:white;
}
.cover:hover span{
display:block;
position: absolute;
left:50%;
top:10%; /* adjust to suit */
width:auto;
white-space: nowrap;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
I would like to place the title a bit above the cover, not completely
over it.
I'm not sure what this means but the vertical positon can be adjusted by means of the top value.
"Piggybacking" on #Paulie_D's answer, I would include the element's properties in the 'normal' state rather than on the :hover state. Two benefits of this:
The element's properties don't need to be applied on every :hover action, hence optimizing elements' repaint a bit.
Just in case you want to show that content on the 'normal' state, the element will already have all the styles applied to it.
Here's what I mean:
.cover {
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span {
position:absolute;
background-color:#f00;
white-space: nowrap;
width:auto;
transform:translateX(-50%);
position: absolute;
left:50%;
top:10%; /* adjust to suit */
display: none;
}
.cover:hover span{
display:block;
}
Truth be told though:
Using :hover to display content is a content strategy and user experience bad practice: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
Not only that but the content cannot be seen in touch screen devices, which renders this approach completely unusable.
Good luck.
This may not be possible without Flexbox, but is worth a shout.
I would like to have elements inside a container to be elastic and take all the lateral space available but when the window resizes and they reach a min-width, they wrap into a second line.
this fiddle has two lines of investigation: inline-blocks and tables.
http://jsfiddle.net/48HMj/
relevant code here:
.container{
width:100%;
background-color: yellow;
}
.container2{
width:100%;
background-color: lightblue;
display:table;
}
.block {
border:1px solid;
display:inline-block;
min-width:100px;
width:auto;
height:50px;
}
.cell {
border:1px solid;
display:table-cell;
min-width:100px;
width:auto;
height:50px;
}
Table-cells behave quite in that manner, but as table cells, they are not supposed to wrap...
Thanks
I'm not sure if I'm understanding your question right but I made a FIDDLE for you to examine.
Essentially I forked the "Live Demo" fiddle from User3660695 added the .flexible class to all the divs and added a media query rule to the container:
#media screen and (max-width:480px) {
.container { display: block }
}
Hopefully that is the behavior you were looking for. Cheers!
I have a page with a vertical drop down menu, and i need to create a photo gallery next to it, however, the gallery is displaying below the menu instead. I've tried adjusting the dimensions to make room for it, but nothing is working.
#gallery {
position:absolute;
float:left;
display:block;
width:500px;
}
.square {
width:150px;
height:150px;
float:left;
position:relative;
background-color:#dbdbdb;
}
.square2 {
width:149px;
height:149px;
float:left;
position:relative;
border: 1px solid;
border-color:#dbdbdb;
}
There are multiple ways of achieving this:
Apply the style display:inline-block; to the DIVs in question
Specify float:left; and a width: on the DIVs that should be next to each other
(For either method) make sure the container is wide enough to fit both of them next to each other