.useless {
float: right;
clear: right;
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
display: flex;
justify-content: center;
height: 250px;
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
I have 2 divs inside a div that refuse to act as block elements. For some reason, they are displayed in-line, not below each other. Could you explain what is the cause for this, not only how to solve it?
Larger div has width and height set.
Smaller divs also have their dimensions set.
Display:block is used on all 3 divs.
I tried using float, didn't work.
I tried using clear together with float, didn't work.
The only thing that is working but terribly, is giving each of them position:relative.
You don't need to provide me with code, just please try to explain why this happens, what is the general problem, and how do you solve it, because to me, as a beginner, it doesn't make sense that they display each other sometimes below, sometimes next to each other.
It's because you use flex on the parent - the default for children of flex parent is to align next to each other, remove the flex and it will work.
I would also say that as your children are 100% width, there is no need for floating so you can remove that too
.useless {
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
justify-content: center;
height: 250px;
}
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
More information about flexbox
Flexbox playground (codepen)
Related
The code
I'm making a grid of names out of divs, and to start off I made some fixed width boxes. Here's the relevant HTML:
#names {
background-color: rgb(191, 191, 191);
width:80%;
margin-left: auto;
margin-right: auto;
border: 1px solid green;
}
.row {
text-align: center;
border: 1px solid red;
background-color: rgba(255,0,0,0.2);
height:80px;
text-align: center;
}
.item{
display: inline-block;
text-align: center;
background-color: rgba(0,0,255,0.2);
width:50px;
height: 100%;
margin-left: 50px;
margin-right: 50px;
border: 1px solid blue;
}
<div id="names">
<div class="row">
<div class="item">hi</div>
<div class="item"></div>
</div>
</div>
For whatever reason, when there is text or an element in the divs, they are placed lower than if there is nothing inside them. In addition, the greater the height attribute is in .item, the farther down the divs are. This can be fixed with a negative margin-top, but it is likely to lead to problems in the future, and regardless I'd like to know the cause of this behavior.
Why is this happening? Why is it only happening with content inside the divs? Why does the height attribute have anything to do with it? Any info would be greatly appreciated!
The initial value of vertical-align is baseline.
From http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height:
vertical-align: baseline — align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Adding vertical-align: top; to .item should solve your problem. Also make sure to use box-sizing: border-box; to prevent the items to have a greater height than it's parent. http://codepen.io/anon/pen/eBNgWe
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
Here is an example I'm working with:
http://jsfiddle.net/adyjzbuh/18/
Here is the code:
<div class="box1">
<div class="box2">Some text</div>
</div>
<div class="box1">
<div class="box2">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box3">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box4">Some more text, actually, 2 lines of textalicious text</div>
</div>
Here is the CSS:
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box3 {
display: inline-block;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box4 {
display: table-cell;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
As you can see, the first block does exactly what I want. The margins automatically adjust, the block is centered as intended. The issues come when there is multiple lines of text. When I use the same style for the next block with multiple lines of text, the block adjusts the width to 100% of the available space, leaving a big gap on the first line and block not appearing centered.
I tried changing the display to inline-block and table-cell but it does not work (as evidenced by the third and fourth block). I've searched everywhere for solutions and none have worked.
The outer container will always be 300px and the inner block will always have to be flexible and adjust to multi-line text. Any solutions/examples would be greatly appreciated, thank you.
EDIT I forgot to mention the client specifically wants the text to align to the left.
I would add:
text-align: center
or
text-align:justify
instead of:
text-align:left
Is that what you expected to look like?
You might want to put a max-width: 50%; on your innerboxes. The reason is your solution doesn't really work the way you want is your margins are set to auto, so the margin is calculated of the width. So if say your width would be 50% of the parent container (in this case .box1), the margins are automatically calculated to fill up the other 50%, 25% for each side.
Max-width could fix your problem, the innerboxes are still flexible, but only will take up 50% of the width.
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
max-width: 50%;
}
Not sure what you are looking for ultimately, but here is a working example, with using table method, like you have, but using
display:table;
display:table-cell;
accordingly with text aligned in the middle, and centered or left aligned.
I'm not sure how I should go about this issue.
I'm fairly new to the front-end development so bear with me.
I have 4 boxes explaining the process step by step. I managed to
display them side by side by using the inline-block property. Now, I am trying to add 4 more small box looking buttons right on top of the boxes. Here is what I mean.
This is the index.html code.
<section>
<div class="how-text">
<h3>How to use SnappyApp</h3>
</div>
<div class="how-box">
<div class="idea-top">
</div>
<div class="idea">
</div>
<div class="scatch">
</div>
<div class="craft">
</div>
<div class="launch">
</div>
</div>
</section>
Here is the css code.
section {
height: auto;
padding-bottom: 100px;
background-color: #2c3e50;
}
.how-text {
text-align: center;
display: inline-block;
width: 100%;
color: white;
margin-top: 40px;
font-size: 30px;
letter-spacing: 3px;
}
.how-box {
text-align: center;
height: auto;
margin-top: 130px;
}
.idea {
background: url('img/idea.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.scatch {
background: url('img/scatch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.craft {
background: url('img/craft.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.launch {
background: url('img/launch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
I also feel like my css code is very repetitive. If you have any suggestions, please help! I really appreciate all your help.
Thank you.
Here
https://jsfiddle.net/ds0md0xc/1/
EXPLANATION
All you need to do is to nest a child element in those divs. Since you specified them to be buttons. I used
<button>
element. But feel free to change it to a div if you want.
<div>
<button> </button>
</div>
For the css. It is going to be pretty simple just set width and height accordingly and it will position itself to the top.
button{
width:100%;
height: //whateveryouwant;
}
For the border, you dont need to have a second div. Just set the border bottom of the button as in fiddle
Hope this helps
here's a fiddle to demo
you should have a 'container' div to act as a parent and have both boxes as children :
<div class='super-box'>
<div class='button'> </div>
<div class='picture-box'> </div>
</div>
as far as your repetitive code, anything that repeats more than a few times (say 3 times) put it in a separate class and apply multiple classes to each div separated by a space
<div class='firstClass secondClass'></div>
Repeat your div called how-box. Here is a link to a fiddle that shows that: http://jsfiddle.net/eofct5ur/
Also your css could be cleaned up by doing something like this:
.idea, .scatch, .craft {
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
then you would do:
.idea {
background: url('http://www.example.com/images/1.png');
}
and so forth for the other divs.
You can just wrap the button and the box inside 1 div.
In that manner they will be displayed one below another (set width: 100%).
So now you have 4 divs, with each inside a button and another div.
If you do then your inline-block on the first 4 divs they will be alined one next to another and inside you have your button and your text.
Greetings
My pen
http://codepen.io/helloworld/pen/dqGDk
I want to vertically align 3 divs inside a wrapper div. Each of the 3 divs should have a height of 33%. I can make the layout work when the divs has a height of 33px but I need it as percentage because the wrapper div`s height changes dynamically. Sometimes its 100px height, sometimes 70px etc...
I just want that all 3 are always correct align by using percentage height.
What is the approach aligning divs with percentage?
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<div id="navigationWheeler" >
<div id="previewTemplate" >1</div>
<div id="previewTemplate" style="background-color: #0094ff;">2</div>
<div id="previewTemplate" >3</div>
</div>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
#previewTemplate {
vertical-align: middle;
line-height: 33%; /* 33px; works but is not dynamic to the wrapper div */
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
I use flex-box, works way better the list items plus you can place ul,ol,il in flex-box.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
It's much easier if you change to use an unordered list. Also the ID previewTemplate should be a class as the ID has to be unique.
HTML
<div id="wrapperDiv" style="height:100px;">
<div id="navigationWheelerContainer">
<ul id="navigationWheeler" >
<li class="previewTemplate" >Testing</li>
<li class="previewTemplate" style="background-color: #0094ff;">2</li>
<li class="previewTemplate" >3</li>
</ul>
<div id="toggleButtonRight" >◄</div>
</div>
</div>
Then in your CSS you can set .previewTemplate in the CSS to have a height of 33%. Also add list-style: none; to get rid of the bullets. Then in #navigationWheeler set padding-left: 0; to get rid of the spacing.
CSS
#navigationWheeler {
height: 100%;
text-align: center;
width: 100%;
vertical-align: middle;
border: black solid 1px;
background-color: lightgray;
display: inline-block;
padding-left: 0;
}
#navigationWheelerContainer {
float: right;
height: 100%;
}
.previewTemplate {
height: 33%;
list-style: none;
}
#toggleButtonRight {
width: 40px;
border: black solid 1px;
cursor: pointer;
text-align: center;
}
Now when the height of your #wrapperDiv changes the li with class .previewTemplate will change it's height.
Here's a working JSFiddle. Also you should avoid using inline CSS. Have all your styles inside your CSS file. Makes it easier to manage in the long run.
EDIT Adding padding-left: 0 to the CSS for the #navigationWheeler
EDIT Updating the JSFiddle to take in account the padding-left for the <ul>
Try using list items instead of div's. You can easily style and their syntax is more focused on alignment then a div. Also, Your wrapper div's need to be a percentage as well, you can't do a 10% height in a 100px wrapper div..