So I'm trying to create a drop down menu with the select and options elements that displays when the device width gets small enough. My problem is I can't center the div that the select element is contained within for some reason (the div id is "navbar2"). It just hugs the left side of the screen. Can anyone see my mistake here?
#navbar2 {
display:none;
}
#media (max-width:380px) {
#navbar2 {
display:inline-block;
width:80%;
margin-left:auto;
margin-right:auto;
border:1px solid red;
}
#navbar2 select {
width:40%;
}
}
So I figured this out. Apparently the "auto" trick doesn't work on inline-block elements. So I switched the "display" to "display: block;" and it centered the div horizontally.
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 got a main articles section in my website where i got an img, and the right side the description of the img. After the words reach the container end, if should break the line and start after the img again. But my words are being behind the image ! Here's a fiddle that can help you to understand: JSFiddle. How can i make the words break the line and start again after the img ? is it possible to do this in the same container like i'm doing ? I'm giving the size of the container like this:
div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
}
And the img/words like this:
div img{
margin-left:-10vw;
position:absolute;
height:40vh;
width:25vw;
}
div figcaption{
color:white;
}
It can be all seem in the fiddle. Thanks for the help !
Thanks.
You have placed the image 'absolutely'.
Use float:left on the image and remove the position:absolute property.
https://jsfiddle.net/pa8qq9Lh/
Add the float attribute to your img.
Example: float:left;
AND: Remove absolute positioning.
div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
}
div input{
display:none;
}
div img{
margin-left:-10vw;
position:absolute; <--- REMOVE THIS RIGHT HERE
float:left;
height:40vh;
width:25vw;
}
div figcaption{
color:white;
}
You'll need to float the image, but left instead of right, and remove the absolute positioning:
div img {
margin-left:-10vw;
/*position:absolute; <-- remove this */
float:left; /* <-- add this */
height:40vh;
width:25vw;
}
JSFiddle
I am working on a site but the centering of my images horizontally in the footer isn't going very well.
When you make the screen smaller then 620px or something like that, then I want to center the text. But also the images.. With the images I mean the 5 icons in the third table and the picture in the fourth table.
If you try to decrease the width of the screen you will see that the images are not perfect aside the text.
So my question is.. How can I center the images horizontally with the text together when the text is aligned in the center?
Here is my footer: https://jsfiddle.net/ThomasPereira/L7dz7d4b/
I think that my mistake is here under -->
#media screen and (max-width: 623px) {
#footer #group {
padding-left:0px;
max-width:100%;
}
#footer {
height:1150px;
}
#footer #group #button {
text-align:center;
}
}
UPDATED
I just edited your fiddle a bit and managed to achieve what you wanted
https://jsfiddle.net/L7dz7d4b/2/
#media screen and (max-width: 623px) {
#footer #group {
padding-left:0px;
max-width:100%;
}
#footer {
height:1150px;
}
#footer #group #button {
text-align:center;
}
#footer #group a #icon {
width: 20px;
height: 20px;
margin: 5px;
float:none;
}
.opmaak{
display:flex;
margin:0 auto;
width:100px;
}
}
Try to make images display:inline-block instead of float:left
Smth. like:
.opmaak a img {
display:inline-block;
vertical-align:-10px; /* value to nicely show img along text, */
}
P.S. You should have only unique ids. Use class instead of id if you have two elements with the same id.
Heres a simple guide
try to use classes rather than ids for things you need to use more than once. Using inline-block is very helpful, but keep in mind, things can get pretty messy if your css isn't good. For example, 2 inline-block elements will not align correctly if one has text, and the other doesn't.
Just some things to keep in mind.
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;
}
I want to align several div's into one line and also center the content vertically and horizontally.
The text to align vertically could be a single line, or a <p> paragraph.
To show n-number of divs in one line, there are 3 approaches
use display:table;
This method is supported IE8 and above and comes in pretty handy if you have large amount of css and text and divs to align
use float:left;
All time favorite, the old school approach, this method is most recommended when old browser support has to be considered, requires clearing of the float at the end
use display:inline-block;
never used this method personally float method was considered instead of using this by me
Base CSS
/************Supported by IE8 and above *******************/
div.table {
width:100%; /* important */
display:table;
text-align:center;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
/************ Method 2 *******************/
div.inline {
width:100%;
display:inline-block;
text-align:center;
}
div.inline-div {
width:32%;
display:inline-block;
}
/************ Method 3 *******************/
.float-class {
width:100%;
text-align:center;
}
div.floatdiv {
float:left;
width:32%;
border:1px solid black;
}
.clearfloat {
clear:both;
}
fiddle showing all three methods in 1 place
To vertically center one line in a div
again 3 approaches :
keep in mind, solution has to be responive, so margin-top:25% or 50% is not gonna work!!!
line-height
this approach is usefull when the dimesnion of the parent div is known, then you can simply use the trick line-height:equal to height of parent div
position
idea is to make the parent positioned relative and the text span class an absolute, then center the absolute text using positioning like top/bottom
display:table-cell
highly recommended if IE7 and older support is not required, simply use vertical-align:middle;
Base css
div.fixed-div-height {
height:200px;
width:200px;
text-align:center;
}
div.fixed-div-height span {
line-height:200px; /* equal to height of the fixed div*/
}
div.unknown-div-height {
height:100%;
text-align:center;
position: relative;
}
div.unknown-div-height > span.unknown-div-margin {
display:inline-block;
height:20px;
position: absolute;
top: 50%;
left:0;
right:0;
}
div.for-ie8-and-above{
width:100%;
display:table;
height:400px;
text-align:center;
}
div.for-ie8-and-above > div{
height:400px;
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing all three methods
To center a paragraph vertically in center
this is the tricky part
Practically there is no possible way to center a parapgraph whose height and the containers height is unknown unless you gor for some hacks....one such hack has been quoted at the end of this answer from css tricks!!
Simplest, use :
div.table-cell {
height:400px; /* can be anything, even in percentage*/
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing remaining 2 possible cases
Another solution posted here :
How do I vertically center text with CSS?
IE hack for display:tables : CSS Tricks
I aligned multiple divs within a table cell (td) by creating a container DIV, as follows:
<td>
<div class="containingDIV"> // container DIV with CSS as below
<div></div>
<div></div>
<div></div>
</div>
</td>
where css for containingDIV is:
.containingDIV {
display: flex;
}