I'm trying to handle two resizeable divs where when I change one, the other div adjusts its size along the grid and vice versa.
I'm able achieve only the resize part. When I go beyond a certain length, the other div moves to the next line which I don't want to happen. Rather I want it to only stay in the same line.
I tried setting the position value to absolute and relative but still was not able to achieve what I want.
This is my Code:
.res {
border: 2px solid;
padding: 20px;
width: 200px;
resize: both;
overflow: auto;
}
.resright {
border: 2px solid;
padding: 20px;
width: 200px;
resize: both;
overflow: auto;
float: left;
position: relative;
}
<body>
<div class="container">
<div class="col-md-9">
<div class="col-md-2 res">
<p>Hello how are u?</p>
</div>
<div class="col-md-2 resright">
<p>ratatatatatata</p>
</div>
</div>
</div>
</body>
Please check this plunkr
Please try the below css
.res, .resright{
border: 2px solid;
box-sizing: border-box;
float: left;
overflow: auto;
max-width: 50%;
padding: 20px;
position: relative;
width: 200px;
resize: both;
}
Related
I am working on a project that has popup boxes for the user to interact with. I am trying to put 2 blocks of content next to each other in the popup box.
I've been looking around for answers, but none of the common solutions seem to be working here. I've tried float:left, display: inline-block, etc. The only thing that has worked is to set the exact width/heights and apply a margin to the second container, but I'd like to avoid this hack-y solution.
HTML:
<div id="equip-robot-modal" class="modal">
<div id="equip-robot-modal-content" class="modal-content">
<div id="equip-modal-content-inner" class="modal-content-inner">
<div id="robot-info-content">
<header id="equip-header">
<h2 id="equip-header-text">Robot Name Header</h2>
</header>
</div><!-- #robot-info-content -->
<div id="inventory-list-content">
<div id="inventory-list-container">
<p>
put more content here
</p>
</div><!-- #inventory-list-container -->
<div id="auto-match-container">
<button type="button" style="width: 50%; height: 50px; margin-top: 20px;" class="button">
<?php //echo langMatch(
//'PLAYER_SELECTOR_AUTO_MATCH'); ?>
Go to Store
</button>
</div><!-- #auto-match-container -->
</div><!-- #inventory-list-content -->
</div><!-- #equip-modal-content-inner -->
</div><!-- #equip-robot-modal-content -->
CSS:
#robot-info-content {
min-width: 500px;
padding: 10px;
position: relative;
float: left;
background-color: red;
}
#robot-image {
padding: 20px 0;
}
#modal-progress-bars {
min-height: 75%;
}
#inventory-list-content {
min-width: 400px;
padding: 10px;
display: inline-block;
float: left;
background-color: purple;
}
#inventory-list-container {
width: 100%;
height: 430px;
border: 1px solid black;
overflow-y: scroll;
}
.modal-content {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 350px;
height: auto;
transform: translate(-50%, -50%);
background-color: #f7f7f7;
color: black;
border: 2px solid black;
overflow: visible;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
padding: 10px 50px;
margin: 0 auto;
}
See the fiddle: https://jsfiddle.net/kqa25wgv/
I'd like to float the 2 content divs within the modal-content inner div. Any suggestions?
Here are some values that worked for me. I stripped out all the superfluous ones:
.modal-content {
width: 800px;}
#robot-info-content {
width: 50%;
float: left;
background-color: red;
}
#inventory-list-content {
width: 50%;
float: left;
background-color: purple;
}
#inventory-list-container {
height: 430px;
border: 1px solid black;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
}
You'll notice that I set the width of the .modal-content class to 800px. That's arbitrary and you can change it to what you want (or set it as a percentage of its containing div, if you have one). The important change is to replace your minimum-width settings with width settings, and set them to a percentage. The problem that you have is that your two inner divs are too wide for their container, so the second one wraps to the next line, so to speak.
Of course, if you use padding and/or margins on the inner content divs, you won't be able to set them at 50% without having the same problem.
The other thing that you'll want to experiment with is floating one content div to the left and the other to the right. If you float them both to the left, it won't make a difference so long as they take up the entire width of their container (and no more than the entire width). This can get tricky when you start using static values for your margins and padding, so you'll need to experiment. (You can also use percent values for margins and padding, which can be less tricky.)
Ok here is my site http://joshadik307.github.io/. And here is the specific code I need help with
CSS:
.pagemenu {
padding-top: 25px;
padding-right: 2%;
padding-left: 2%;
text-align: center;
}
.bubblewrap {
display: inline-block;
vertical-align: top;
width: 23%;
margin-right: 5%;
margin-left: 5%;
text-align:center;
}
.bubble {
background-color: white;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: black;
width: 250px;
height: 250px;
display: inline-block;
}
HTML for one of the 5 circles (I figured it would save space to just show one, but they all use the same html and are all wrapped in the same pagemenu div)
<div class = "pagemenu">
<div class = "bubblewrap">
<div class="bubble">
<div class="text">
ABOUT
</div>
</div>
</div>
</div>
Ok now here is the problem. If you look at my sight (linked to above) basically I have 5 circle divs set up to align themselves in the shape of a W at the top of the page (under the header.) The problem is the W is not always center aligned on the page, and after looking at the source on chrome, I realized that this is because the "bubbles" are not always horizontally centered within the bubble wrapper. Does anyone know how I can fix it so that the bubble div always aligns itself horizontally within the bubblewrapper div?
Add margin: auto; into your .bubble class
.bubble {
background-color: white;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: black;
width: 250px;
height: 250px;
margin: auto;
}
A margin:0 auto; to your .bubble class will do the fix :)
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
I have this set of divs in may page and I can not get the whole lot to re-size on browser window re size, I have tried to use some Jquery coding found on this site but it seems that the Divs are only resizing on width rather than on both w & H.
My image for divs is on this link:
www.beemagic.co.uk/mydiv.html
Not really sure what your after, from the looks of it you want the whole site to be able to be resized?
I come up with this very basic JSFiddle that shows that it can be done if that's really how you want it.
HTML:
<div class="wrap">
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="slider"></div>
</div>
</div>
CSS:
.wrap {
height: 1000px;
width: 100%;
border: green 2px solid;
}
.header {
height: 19%;
width: 99.6%;
border: blue 2px solid;
margin: 5px;
}
.content {
height: 79%;
width: 99.6%;
border: red 2px solid;
margin: 5px;
}
.side {
height: 85%;
width: 20%;
border: purple 2px solid;
margin: 5px;
}
.slider {
height: 10%;
width: 99%;
border: gold 2px solid;
margin: 5px;
}
DEMO HERE
Basically I have a set of divs that are pretty much identical in structure, then following them I have a div that is unique to the set. Basically the first divs are a bunch of different categories and the last div is a userprofile type square. What I can't figure out is why the user profile square is being rendered with a higher position than the other divs.
they all have the same css
cursor: pointer;
display: inline-block;
margin: 10px;
padding: 5px 5px 10px 5px;
width: 219px;
height: 219px;
background: #fff;
and the container has this css
display: block;
float: left;
width: 100%;
text-align: center;
padding: 15px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
this is what it looks like
I'm guessing it's because the divs internal structure is different, but I'm not sure why it's doing this. I also noticed that if for example one of the category divs' images do not load it behaves the same way as my rogue div.
Any light there is to be shed on this issue is much appreciated.
With display: inline-block; it's best to always add vertical-align: top; to the children (and then format from there as needed), especially if you have different element types or images in your container. Even images inside of your child elements can mess up the layout of inline-block;. inline-block elements also suffer from the "whitespace problem", which can affect layout. To prevent that you can either put all child elements together or comment out the whitespace.
Demo: http://jsfiddle.net/ThinkingStiff/wwwkJ/
HTML:
<div id="container">
<div class="child">one</div>
<div class="child">two</div>
<img class="child" />
</div>
<div id="container-align">
<div class="child-align">one</div>
<div class="child-align">two</div>
<img class="child-align" />
</div>
<div id="container-align-whitespace">
<div class="child-align">one</div><!--
--><div class="child-align">two</div><!--
--><img class="child-align" />
</div>
CSS:
.child {
border: 1px solid red;
display: inline-block;
height: 50px;
width: 50px;
}
.child-align {
border: 1px solid red;
display: inline-block;
height: 50px;
vertical-align: top;
width: 50px;
}
#container, #container-align, #container-align-whitespace {
border: 1px solid black;
height: 100px;
width: 300px;
}
Output: