I got the following constellation of <div>-elements:
<div class="root">
<div class="mainContainer">
<div class="menuBarContainer"></div>
<div class="appBoxContainer"></div>
</div>
<div class="sidebarContainer"></div>
</div>
Now, I want them to arrange on my page as depicted in the follwing picture:
Which would be the best way to arrange the <div> in CSS?
My problem is that the boxes try to fit in one line, even if I set the width-attribute to 100%.
I want the site to be fully responsive and the sidebarContainer-element is linked to a button which toggles its visibility.
What can I do to make the mainContainer-element take the full width of the page (root) when the sidebar is invisible (width: 0)?
Thanks in advance!
Look into flexboxes, they're practically made for this desktop-application like layout.
Row direction for for .root, column direction for .mainContainer
For responsive design you can use media queries to hide the .sidebarContainer below a certain screen size, even depending on device orientation.
Or simply change the root flexbox to column direction to display it below the main content.
If you set (blue) boxes to display:block they should clear automatically both sides and get positioned like your sketch;
Then , assuming your sidebar has a variable width you could set
.mainContainer {width: auto; display:inline-block}
Related
I'm trying to achieve a dynamic layout option for a site, but I can't nail down how to make this work. The effect I'm trying to create should look like this:
Where:"1" will have text, and have a dynamic height;
"2" will have a background color and also fill the containing div below it, with a small vector image centered horizontally and vertically. I want to use a dynamic height on this so no matter how much text is in "1", it fills the rest of the bottom of this container;
"3" is an image (img-responsive) that fills the right half of the container. It will be what sets the height of the container div, with the possibility of different sized images being implemented.
I want these to display as shown on desktop browsers and landscape tablets, but to fall into a single column when its viewed on a smaller screen format.
I'm currently using two col-md-6 for each of these, and had the desired background color on the container. The problem I'm running into with bootstrap is when the screen is between 992px and 1200px, the content is collapsing to a smaller screen size, but it is making the bottom of "2" extend beyond the bottom of "3".
I've tried using flexbox for this, but when I use it in conjunction with col-md-6, it doesn't collapse to the single column on the smaller screen sizes. It also just doesn't seem to work too nicely with bootstrap 3.
I'm open to any type of solution outside of completely taking out bootstrap. Thank you all so much for your time and assistance!
EDIT 1:
Totally forgot to add the code. What I have so far is as follows:
https://jsfiddle.net/b86k1myr/
<div>
It's kind of wonky because bootstrap isnt also enabled. But that's what I have for that so far. The other attempt with flexbox is as follows:
https://jsfiddle.net/mkg73uvk/
As a tip for the future, you should always post the markup you're using currently.
Try this:
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12">1</div>
</div>
<div class="row">
<div class="col-md-12">2</div>
</div>
</div>
<div class="col-md-6 col-sm-12">3</div>
</div>
I have this CSS: https://cal-linux.com/styles/tutorial.css
And a sample page that uses it: https://cal-linux.com/tutorials/gswc++.html
When I display this on a smartphone (or when I check it through Google's Mobile friendliness verify service), the layout looks huge (badly cropped, instead of reduced to fit the smartphone's screen.
I only use proportional measures (for example, outsidecontainer's div has width 80%, inside right-most column has min-width 25%). I'm placing Google Ads in there, but it's a "Responsive" add, which is supposed to adapt to the page's available size and layout.
Any tips on this? I figured posting the actual links to the pages might be ideal; but please let me know if a "minimal" instance of code that reproduces the problem would be preferred.
Thanks,
Cal-linux
There are a few things I note here:
You use display:table-row and display:table-cell a bit too much. Those don't respond as well to the resizing especially if you have not specified the width of each item. Instead either use floats with a clear:both on the container's :after pseudo-element or inline-block. Either way you should define percent widths for the containers.
Your css has a lot of white-space:nowrap but doesn't use overflow:auto which forces the element to not resize the content and just stretch its parent container.
Aside from that a few places I see a fixed px width which makes it more difficult to resize. It doesn't seem to be your ads. Although google's script does throw an error about trying to put an ad in an 86px x undefined space. You can set a fixed height or at least a min-height to give the script an idea of how big an ad should be placed there.
The easiest solution is to incorporate bootstrap to do the heavy lifting of setting up a grid for what you want.
You can basically do your two column style like so:
<div class="container-fluid">
<div class="left-col col-md-11">
<!--- ALL YOUR CONTENT HERE //-->
</div>
<div class="right-col col-md-1">
<!---Google Ads go Here //-->
</div>
</div>
If you want to stick with your own style, by using the code inspector in chrome I was able to get to the following result when resized:
I made the tablerow class be a standard display:block
The first column was set to width:75%; display:inline-block;
The second column was set to width:25%; display:inline-block;
The autosize elements changed to display:block;max-width:100%; overflow:auto;width:auto;padding:0
The div.code blocks were changed to display:block;white-space:nowrap;width:auto;
Everything else stays the same pretty much. That should fix it, however you should note that frameworks like bootstrap help out with mobile sites by making the page columns collapse and go one ontop of another for mobile browsers so that they get maximum space.
I've been trying a few techniques, but I'm getting stuck on this problem. I want to do the whole 100% height columns within a section thing, but one column has an image which needs to scale to fill one column.
So I have one column of text (variable content from WordPress) that is 66% wide and one column that holds an image and is 33% wide. The image can be on the left or the right based on a class.
My HTML:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
Most of the CSS techniques do tricks to get a solid background color in both columns. But in this case, I want a scaled image. I'm willing to switch from an img tag to an inline style="background-image" to get the scaling to work, but either way, I'm having trouble getting the column heights to match.
The closest solution was to use display:table, but I don't like that I can't change which side the image is on without changing the HTML. With my current float based design, I can swap the image placement with just a different class (the left-image above for example).
With just floats, here is an example of what I have so far: http://jsfiddle.net/no80ayc2/2/
You'll notice that when the view is narrow, the image is shorter than the overall container height.
I've read something about using relative/absolute positioning, but the only way I could get that to work was with a fixed height for the container. That won't work for me: http://jsfiddle.net/qLa4g7fL/1/
EDIT: To clarify, I want the image to fill the entire space (33% width by 100% height). And I expect it to get cropped as necessary.
Here is an example of how that should look (just a quick idea)
change min-width: 100% into max-width:100% in .page-section.image-third .image-wrapper img
Then your image-wrapper may not have the full height but will stop your image to overflow.
You need to change your min-width to max-width,
Try to look at this link, I just update your code
http://jsfiddle.net/no80ayc2/7/
There's a new amazing css property called object-fit!
https://css-tricks.com/almanac/properties/o/object-fit/
You'll fall in love!
I am new to learning web design ,
please take a look at > this images
here I want to wrap a content in a 960px width ( red box )
but I want that every content / section is having a different background color ( just for example ) but the background width is exceed the wrapper , or maybe full width / 100%
how can I do this ?
thanks
EDIT :
just for example the site that doing something like this is IMAGESHACK the background color is full width of the screen but the content still wrap to main wrapper
You will need a container with the width of 960px:
<div class="lightGray">
<div class="container" style="width:960px">Content</div>
</div>
<div class="medGray">
<div class="container" style="width:960px">Content</div>
</div>
<div class="darkGray">
<div class="container" style="width:960px">Content</div>
</div>
This will allow the colors to expand all the way across the screen, as well as expand as content expands. I would, of course, stray away from inline styling. Just make a class called container:
.container {width: 960px;}
You are looking for the CSS property overflow.
Here is an example: http://www.w3schools.com/cssref/pr_pos_overflow.asp
And here is the summary: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Do you know about div ? They are very useful for this kind of things!
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/