CSS, how to put a div inside a div that is responsive?
Tags: css,html
Problem :
I am trying to create a box with 2 contents side by side that is responsive. I want the divs to have separate classes so when I add the javascript, each content will be unique from the other. Can somebody help me out?
html:
<head>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
.outer {
border: 1px solid black;
}
.inner-top {
float:center;
text-align: center;
}
.inner-left {
border: 1px solid black;
text-align: center;
}
.inner-right {
border:1px solid black;
text-align: center;
}
</style>
<div class="outer">
<div class="inner-top">
<div class="inner-left">
<p>
inner left
</p>
</div>
<div class="inner-right">
<p>
inner right
</p>
</div>
</div>
</div>
</body>
</html>
EDIT: I should explain myself a bit more in detail, I want to keep the outer class as a container, use the inner-top class as the inner container for the inner-left and inner-right classes.
Solution :
Is this the effect that you're going for?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.outer {
border: 1px solid black;
}
.inner-top {
/* float:center; */
text-align: center;
overflow: auto;
}
.inner-left {
border: 1px solid black;
text-align: center;
float: left;
width: 50%;
}
.inner-right {
border:1px solid black;
text-align: center;
float: left;
width: 50%;
}
CSS Howto..
If you anchor links are 60px tall line-height:60px should do it. JSFiddle...
You can use a repeated radial gradient to create dots like this: Create a single circle with a radial gradient: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%) Place...
You could use either display:table or display:flex; table layout example: .list-green { padding:0; margin:auto; display:table; width:100%; border-spacing:10px; } .list-green li { display:table-cell; } flex example .list-green { padding:0; width:100%; margin:0...
You can use fadeTo() function for this task: setTimeout(function () { $('#menuwrap').fadeTo('slow', 0); }, 3000); $('#menuwrap').hover(function () { $(this).fadeTo('slow', 1); }, function () { $(this).fadeTo('slow', 0); }); Demo: https://jsfiddle.net/sruLsr37/2/...
I agree with Coop, buf if you only want vertical scroll bars it would be the following. #PopupWindow { overflow-y:scroll } Edit: Also with that bit of code you have...
There are two errors in your script: There is a missing parenthesis (something that you could have easily see in the JavaScript console) to close the animate function. NextPhoto ==...
Visual Studio Menu > Tools > Options > Web Essentials > LESS ...
According to the jQuery documentation the hidden selector can return true for any of the following cases They have a CSS display value of none. They are form elements with...
They do synchronize. Try hacking http://threejs.org/examples/css3d_sandbox.html. You should be able to create a CSS3DObject and a PlaneGeometry that line up perfectly, assuming the same camera is used to render both....
There is a new property for backgrounds in CSS3 called "background-size" Try this: <html> <head> <title>Background-Image Test</title> <style> body { background-image: url(./3840x1200.jpg); background-size: 100%; background-origin: content; background-repeat: no-repeat; } </style>...
If you want to do this in css only you have to create divs for every column, and float those columns (but it messes up order of images). Alternatively, you...
In a way.. You're kind of doing it backwards from how its done everywhere else. Instead of modfying the width of your wrapper, you want the wrapper to be fluid...
The : is a special character in CSS identifiers, it represents the start of a pseudo class selector like :hover, :first-child, etc. You would need to escape it. #phoneForm\:phoneTable {...
You can use the attr function to get the title: $(...).attr('title') And jQuery's wrap function $(...).wrap() Here is an example: http://jsfiddle.net/d9HtJ/...
You should add position:relative and z-index: 101 to your ul to make both of those things happen: #nav li:hover ul{ left:0; position: relative; z-index: 101; } Here is a fiddle:...
Figured out, I could add time app.configure(function() { //... app.use(setlocalTime); //... app.use(app.router); }); function setlocalTime(req, res, next) { app.locals.time = Date.now(); next(); } script(src='/scripts/script.js?'+time) ...
Note, your CSS refers to #resulttbl. Your script is outputting a table with the id resultbl, so the 100% width wouldn't apply to it.
Use the #{} interpolation notation to treat your variables as strings. Since Sass cannot perform arithmetic on strings, the / gets treated as a literal slash instead of the division...
I have made small changes like change the document event and add e.stopPropagation(). Please check. $('.subnav__right li a').click(function(e){ e.preventDefault(); e.stopPropagation(); var $this = $(this).parent().find('.subnav__hover'); $('.subnav__hover').not($this).hide(); $this.toggle(); }); $(document).click(function (e) {...
:contains-element isn't a CSS selector, as far as I know. Where did you get it from? The fact that it doesn't exist explains why it doesn't work in browsers and...
Add your own class, ex: <div class="sidebar right"></div>, with the CSS as .sidebar.right { float:right } ...
Change #wrapper{height:100%;} to #wrapper{height:auto;} Fiddle here....
Let me know if I can improve it :) #progressbar { background-color: #999; border-radius: 10px; /* (height of inner div) / 2 + padding */ padding: 0.5px; max-width: 150px; font-size:...
it's caused of the p tag, try to use a span tag instead. <div id="sign-in-button"> <span>Sign-in</span> </div> ...
ul is a block level element by default, it will take up entire horizontal space on the page, so you need to assign some fixed with to your ul element,...
Without a code sample it's hard to tell where you are. If you managed to get the button to hide the blocks (like you said with ng-click="showBlocks={'display': 'block'}) then adding...
You should use a monospace font then. E.g., add font-family:"Menlo"; (the one Stack Overflow uses for code blocks :) body{ font-family: Menlo, monospace; } iiiii iiiii iiiii<br> wkerh werce kjhvg...
menu-item is an class? then prefix it with an dot .menu-item or if its a ID then prefix it with an # #menu-item
Load your CSS in the proper order. HTML <head> <link rel="stylesheet" type="text/css" href="Angular-material.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> This is because the C in CSS stands for Cascading. This means...
If I understand your question you want to animate the border-width of the element, maybe the border-top-width, but I don't think that will create the effect that you are looking...