I would like to accomplish this design with only HTML & CSS.
It has to be full responsive, meaning:
The light grey div on the left, must be responsive and have a fixed padding-top and padding-bottom, depending on the content. ( if content becomes higher because of smaller screen sizes, the padding must remain and the div must grow ( together with the right div with the image ) ).
The light grey div on the left, must go outside the container, to the far left and fill the entire screen ( on the left side ). BUT the content of this div must align within the container of the page div.
The image on the right, must have the same size and the light grey div on the left, and contain an image, centered within the div.
Problems I encountered when trying, see link for code:
Adding a sibling div, next to the div with the content, and position absolute to the left of the screen with z-index -10. This div had no idea of the height of the content, so the paddings are not responsive. play tailwindcss
When adding the position absolute on the div with the content itself, I cannot align the content with the container of the rest of the page. play tailwindcss
... out of ideas. Any help?
Related
Having trouble getting the black bar at the bottom of the slider to stretch full-width on the screen. It works on the left, but the right side is cut off at the container edge. Using Master Slider if that's relative info. Any tips on how I can get that black bar to stretch all the way across?
http://designatwork.net/51fifteen/
To fix the issue
Remove tranform property from the div having class ms-slide ms-sl-selected
Remove width property from the div having class ms-layer. As div is absolutely positioned, set left and right values to 0 to make it full width
Remove max-width and left from div with class ms-slide-layers also
Although I feel, structure is not proper, having relative positions within absolute creates problems. Still above fix can save you from re-write.
A few classes like ms-slide-layers, ms-inner-controls-cont and ms-layer have hardcoded values for left, width and, most limiting in this case, max-width.
I think this case would benefit from using the viewport width unit, vw by setting width: 100vw; you're telling it to be the width of the entire viewport.
Also, you don't need the padding and margin in 9999px. You can position: absolute the layer, have bottom: 0 and then use reasonable padding and align the text according to your needs to get a better, cleaner result.
First set a position (anything other than static) to its parent element. Then set the black bar's position to absolute. This way, it will be relative to its nearest parent element that contains a position. Next, stretch it out by either using height and width properties, or use directional positions (top, bottom, left, right). If youll use directional positions then use both left and right simultaneously and the black bar will expand across the screen.
I am using bootstrap to design web application. I have two main divs, sidebar div with span 2 which has position : fixed and right div which is of span 10. These divs has float : left property as per bootstrap css file as I am using row-fluid class.
So the problem I am facing is when window size is reduced after certain limit, user is able to scroll the content of right div and which is overlapping with left div. So I want hide the content of right div which overlaps on left div ( ie. left div, the fixed div, should behave like a left wall of browser window for right div).
I have tried using overflow property and also tried changing z-index of divs, but nothing seems to be working here.
jsfiddle link - here is the link I have reproduced the problem, there if you scroll left in result area, you can see the content of right div is overlapping with left div(nav list), as I have given left-margin : 240px to rightDiv. So what I want is, the right div content should not overlap left div, and it should be hidden behind.
Any suggestion on how to get it right or is there any other way to achieve the same?
I'm not 100% sure exactly what you are trying to do. If it's just hiding whatever is overlapping then applying a background-color to the fixed div will achieve this.
JSFiddle.
You can left padding equal to the width of left navigation to prevent the overlapping (imitate)
padding-left:140px;
JSFiddle
I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.
http://jsfiddle.net/Rrgr7/
What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.
You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.
If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.
If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.
I'm working on a new portfolio site which has a menu that looks like this: http://cl.ly/9rJ7
The Logo and three buttons are positioned absolute and have a fixed width (which will be changed by animation with javascript later).
The div to the right should therefore fit exactly into the gap between the third button and the browsers's right edge (as seen the screenshot).
I've already tried to give it a width of 100%, a position of left:700px and the parent div an overflow: hidden, but this doesn't seem like correct css to me, since the overflow doesn't work in some browser.
Any suggestions?
The Logo and three buttons are positioned absolute and have a fixed width .. The div to the right should therefore fit exactly into the gap between
the third button and the browsers's right edge .. I've already tried to give it a width of 100%, a position of left:700px
Try position:absolute; left:700px; right:0.
It's fine to set both the left and right properties.
If you float your left elements left, then add a div with margin-left: 700, it should fill the remaining space to the right.
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.