Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
My problem is this. I have container and inside him i have 2 more containers one of the containers i use to put image and other container i use to put header and paragraphs. I want to make something like short preview of a news and i will have multiple copies of this containers with different images and different headers and paragraph and i don't want to always adjust the height of the parent container i want to automatically adjust his height. Can i do that with CSS and how ?
Here is example code
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src=" ">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
Here is CSS
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
The containers inside boxForNews are growing accordingly to the elements i put inside them but their parent do not grow accordingly to the grow of the 2 containers and my jumbotron gets broken because of this.
I Could give the first container some height but i the content i put inside the 2 containers inside him will always change and i will have to always play and change the height for every news i add.
First the errors in the code; You are missing an end quoation mark for the class attribute boxForImage, and the style rule .boxForImage ends with { instead of }.
The floating elements in the boxForNews div won't affect the height of their parent. You can make it contain its children by changing the overflow style:
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
.boxForNews {
overflow: hidden;
background: #eee;
}
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src="http://placehold.it/100x100">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
i have 4 divs inside of a div like this:
<div id="Wrapper">
<div id="CoreSideBar"><!-- a sidebar to the right -->
</div>
<div id="SystemContent">
<div id="SystemNavigation"><!-- will be some kind of "tabnavigation" in the top of this div -->
</div>
<div id="PageContent">
</div>
<div id="SystemSideBar"> <!-- a sidebar to the left -->
</div>
</div>
</div>
I would like the sidebars to have 200px width each and im also going to make it possible to "collapse" the sidebars so you can have more space for the PageContent div if you need it.
What do i need to do to make the PageContent div fill out the remaining whitespace between the CoreSideBar and the SystemSidebar? Is this even possible in all browsers?
Just put your sidebars' markup first, and float: left; or float: right; as desired — the div's default behavior will take care of the rest.
http://css.maxdesign.com.au/floatutorial/tutorial0901.htm
http://phrogz.net/css/understandingfloats.html#incontainers
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):