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;
}
Related
I have two divs inside a single div and I want to hide the left div on clicking button.I am trying but hiding is done on lower to upper side and i want toggling from right to left.can someone give me suggestion....
Here is my code..
.pg_bd {
width:100%;
height:100%;
display:table-caption;
}
.pg_bd_left_mod {
width:240px;
background-color:#7f7f7f;
margin-top:5%;
margin-left : 0.5%;
/*display:inline-block;*/
}
.pg_bd_right_mod {
width:85%;
height:100%;
background-color:#7f7f7f;
float:right;
}
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
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.
I have a div with some text and another div with some hidden buttons behind the text div and move to the left when needed (anitmation).
The problem is that the text inside div is moved to the right to let the buttons div not overlap with the text.
Check here:
http://clip2net.com/s/2JYBV
How to make text of main text div not interact depending of the the width/size/position of the button div?
.a {
position:relative;
width:400px;
height:300px;
margin:50px 200px;
background:#000;
padding:10px;
color:#fff;
}
.b {
position:absolute;
top:10px;
left:0px;
width:180px;
height:290px;
background:green;
display:none;
}
.a:hover .b {
display:block;
/* left:-150px; */
}
You can use relative and absolute positioning of divs to fulfill your required task.
http://jsfiddle.net/G9Q25/
try giving a z-index to your button div
z-index:2;
Try adding the following to your definition:
overflow:hidden;
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;
}