Search the Community

Hi! Im trying to design a view with 2 boxes : on the left 1 menu and in the right the main box. The menu should be vertical and relative, and with the main box I can do what I want. The problem is that this 2 boxes should fill all the space horizontally and vertically. But all the time that I change the width or the "position" I have 2 results: Part of the main box is hidden with the menu box The two boxes dont fill the space This is the css code of my boxes: .main-box{ background-color: #FFFFFF; font-size: 14px; color: #34495E; height:99%; min-width: 150px; line-height: 1.231; width: 94%; margin-left: 10%; margin-right: 0.5%; float: right; border-radius: 5px 5px 0 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); } .menu{ position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: 7em; background-color: #333; } And this is the result. How can I solve it? Thanks!

https://www.w3schools.com/w3css/w3css_panels.asp Hello. I'm trying to make a panel - this works, however it takes up 100% of the available width. Is there a way to make the panel A ) auto-adjust to the content of the text, and/or B ) a specific width - eg 50% (of the available width of div - NOT 50% of the screen-size...)

I have a number of web pages that are controlled by an external style sheet. I am pasting the css stylesheet in its entirety. My questions are: all of the web pages have an html and body element with a width of 1108px. (1) What is determining the width of these 2 elements? (2) What is the best practice for defining these elements? I want the web pages to be responsive to different browser sizes. Does defining fixed width constrain an element's responsive behavior? /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*THIS IS THE END OF THE MYER RESET*/ body { font-family: "europa",sans-serif; margin: 0; } .parallax { /* The image used */ background-image: url("img_bckgd_windows_7283_1920-3.jpg"); /* Set a specific height */ height: auto; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: repeat; background-size: cover; padding-bottom: 1%; } h1 { font-family: "europa",sans-serif; font-size: 3.6em; letter-spacing: .3em; text-align: center; color: black; padding: 5% 0; padding-top: 7%; } h2 { font-family: "europa",sans-serif; font-size: 2.8em; color: black; letter-spacing: .2em; text-align: center; padding-bottom: 5%; } h3 { font-family: "europa",sans-serif; font-size: 2.2em; color: black; letter-spacing: 1.5px; text-align: center; padding-bottom: 1%; } h4 { font-family: "europa",sans-serif; font-size: 2em; color: black; letter-spacing: 1.5px; text-align: center; padding-bottom: 1%; } .container_blank_space_small { height: 26px; } .container_blank_space_big { height: 39px; } .container_blank_space_big p, .container_blank_space_small p { text-indent: -9999px; } .flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 50px 50px 50px; padding-bottom: 30px; align-items: center; justify-content: center; font-family: "europa",sans-serif; font-size: 105%; } .nav { margin: 0 30px; } a { text-decoration: none; color: black; } div.nav a { font-size: 1.8em; } .category { margin: 7% 0; } .container { width: 100%; margin: 0 auto; } .container p { font-size: 1.6em; margin: 10% 30%; line-height: 125%; } .wallcut { margin: 6% auto 10%; } div.wallcut p { text-align: center; font-size: 1.2em; margin: 4% auto 5%; } .underline { text-decoration: underline; font-variant: small-caps; } a:hover { text-decoration: underline; } * { box-sizing: border-box; } img { vertical-align: middle; } .center_width { display: block; margin-left: auto; margin-right: auto; width: 58%; } .center_height { display: block; margin-left: auto; margin-right: auto; width: 24%; } .center_oversize { display: block; margin-left: auto; margin-right: auto; width: 90%; } p.return { font-size: 2em; } footer { background: #827e90; height: 75px; margin-top: 5%; } footer p { padding: 25px; font-family: "europa",sans-serif; font-size: 100%; letter-spacing: .8px; color: white; } .flex-container-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; padding-top: 0px; justify-content: space-between; align-items: center; } .flex-container-footer>div { margin: 0px 50px; } .social a { color: white; } .fa { padding: 10px; font-size: ; width: ; text-align: center; text-decoration: none; border-radius: 50%; } .copyright p { font-family: "europa",sans-serif; color: black; font-size: 80%; letter-spacing: .8px; line-height: 135%; font-weight: 500; } /*---------------MEDIA!!!------------*/ @media screen and (max-width: 768px) { h1 { font-size: 2em; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } h4 { font-size: 1em; } div.wallcut p { font-size: .9em; } p.indent1 { font-size: 1em; } div.nav a { font-size: 1.3em; } div.about p { font-size: 1.25em; } } @media screen and (max-width: 1366px) { h1 { font-size: 2.6em; } h2 { font-size: 2em; } h3 { font-size: 1.6em; } h4 { font-size: 1.3em; } .indent1 { font-size: 1em; } div.nav a { font-size: 1.3em; } div.about p { font-size: 1.25em; } p.return { font-size: 1.3em; } }

Hello : I am changing the width of our website, and i was looking for a suggestion. I know that most users (93%) have a monitor with a resolution of 1280 or larger. I am looking for a recommended size or standard size somewhere between 1200 px - 1366 px Any suggestion or recommendation and a quick explanation why would be greatly appreciated !! Thank you!

Dear all: Below code is for the header part of a responsive page. The header, 275px high, is divided into a video on the left and an aside section on the right. The video takes 60% width, the remaining 40% is occupied by the aside section. The aside comprises from top to bottom: flags area with 15% height, bottom link with 25% height, and an h1 in between, set to auto height to take the remaining height. I set the h1 area to begin at 15% height (height of the flags section) and 28% from the bottom (height of the bottom link plus 3% padding). When I checked the height of h1 using a dashed box, I have noticed that it does not begin from 28px as it should. Would you pls. help me with: [*]making h1 auto area starts from where it should;[*]checking all the CSS styles and fix wherever necessary to accomplish a more sound and professional code that would serve in a responsive page. <!DOCTYPE html><html><head><style>@charset "UTF-8";/******************** Layout (global rules for all sizes) ******************************/body {margin: 0; padding: 0;}.home_page_header header a.bottom_link {display: block; position: absolute; background-position: 0px 0px; background-repeat: no repeat;}body {color: #575c7a; line-height: 1.5em; font-family: Arial; font-size: 14px; /* base font*/background: grey repeat-x 0px 0px;}.page {max-width: 980px; margin: 0px auto 0px auto; position: relative; background-color: #fff;}/************************ Layout Large Screen (default for older browsers) ****************//*************************Start Main Header ***********************/.home_page_header {height: 275px; margin: 0px auto;}.home_page_header header {height: 100%; background-size: 980px 275px; background-color: white;}/**********************************Video *************************************************/.mnvid {float: left; width: 60%; height: 100%; margin: 0px; vertical-align: middle;}/********************************Aside Formating***************************/.home_page_header aside {width: 40%; height: 100%; background-color: white; float: left; position:relative;}/******************Aside Language***********************************/.home_page_header aside .lang {display: block; position: absolute; left: 0; right: 0; top: 0; height: 15%; padding: 0px;}/**********************************Aside h1*****************************************/.home_page_header aside h1 {display: block; position: absolute; left: 0; right: 0; top: 15%; bottom: 28%; height: auto; padding: 5% 0 0 0; line-height: 150%; text-align: center; font-size: 2em; font-style: italic;color: #000; border: 1px dashed orange;}/********************Aside Bottom Link**********************************************/.home_page_header aside .bottom_link { position: absolute; left: 0; right: 0; bottom: 0; height: 25%;padding: 3%; font-size: 2em; font-weight: bold; background-color: grey;border-radius: 10px; /*to make rounded corner*/-moz-border-radius: 10px; /*to make rounded corner visible in Mozilla*/-webkit-border-radius: 10px;}/*to make rounded corner visible in browsers supporting webkit*/ .home_page_header aside .bottom_link p {position: absolute; /*to vertically and horizontally center the text*/ top: 50%; /*to vertically and horizontally center the text*/left: 50%; /*to vertically and horizontally center the text*/ margin-right: -50%; /*to vertically and horizontally center the text*/transform: translate(-50%, -50%); /*to vertically and horizontally center the text*/}.home_page_header aside .bottom_link p a {text-decoration: none; text-align: center;color: #FFF;padding: 20px; /*allows activating the link even when the cursor is far from the text. Not affecting total height of aside, so not counted. */}.home_page_header aside .bottom_link p a:hover {color: #FFB280;}</style></head><body><!--Start of main page container--><div class = "page"> <!--Start of main header--><div class = "home_page_header"> <header> <iframe class="mnvid" src="[url=https://www.youtube-nocookie.com/embed/Wc8tidOjhUY?rel=0]https://www.youtube-nocookie.com/embed/Wc8tidOjhUY?rel=0[/url]" frameborder="0" allowfullscreen></iframe><aside><div class="lang">flags here</div><h1>Our Unique Product <span><!--<p><br>-->Tastes Differently</span></h1><div class="bottom_link"><p><a href="#">Free Trial</a></p></div></aside></header></div></div></body></html>

Hi everyone, Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ? Also, why does my "display: inline;" not work? You can see what I mean here: http://www.jasonwangart2.blogspot.ca/ Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row. Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs. Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up. Does anyone know the answers to the 2 above questions? My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement. The code is below. Thank you very much, Jason <!doctype html> <style>/* HEADER OUTER BOX */ .jw-1-header-box { border: 1px dashed red; width:100%; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: rgba(0,0,0,1); }/* GRAPHICS */ .jw-2-graphics-bar { border: 1px dashed purple; width: 100%; height: 0px; overflow: visible; } .jw-3-circle-large { position: relative; left: 10px; top: -200px; width: 270px; height: 270px; background-color: rgba(180,200,255,1); border-radius: 135px; } /* NAVIGATION */ .jw-2-nav-bar { border: 1px dashed cyan; width: 100%; overflow: hidden; } .jw-3-nav-bar-left-section { border: 1px dashed maroon; display: inline; float: left; } .jw-3-nav-bar-right-section { border: 5px dashed red; width: auto; display: inline; float: right; } /* HOME BUTTON */ .jw-3-button-home a:link, .jw-3-button-home a:visited { border: 1px dashed purple; position: relative; z-index: 1; font-size: 41px; color: rgba(80,100,155,1); } .jw-3-button-home a:hover, .jw-3-button-home a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } /* PAGES */ .jw-3-button-pages a:link, .jw-3-button-pages a:visited { border: 5px dotted orange; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(80,100,155,1); } .jw-3-button-pages a:hover, .jw-3-button-pages a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } .jw-3-social-text-box { border: 5px dotted green; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(0,0,0,0.7); } .jw-3-social-icon-box { border: 5px dotted blue; margin: 0px 10px 0px 10px; display: inline; font-size: 16px; /* need this to align block-1 */ } .jw-opacity-link a:link, .jw-opacity-link a:visited { border: 0px solid black; width: 30px; opacity: 0.45; } .jw-opacity-link a:hover, .jw-opacity-link a:active { border: 0px solid black; text-decoration: none; /* to remove the little line */ opacity: 1.0; } img /* need this to align icon image */ { vertical-align:top; /* top or bottom */ }/* DIVIDER */ .jw-2-divider-1 { border: 1px dashed violet; width: 100%; padding: 50px 0px 0px 0px; text-align: center; } .jw-3-circle-small { display: inline-block; width: 10px; height: 10px; background-color: rgba(171,225,250,1); border-radius: 5px; margin: 0px 50px 0px 50px; } /* UPDATE */ .jw-2-update-bar { border: 1px dashed pink; width:100%; text-align: center; } .jw-3-update-text-box { border: 1px dashed turquoise; font-size: 16px; color: rgba(0,0,0,1); }</style> <!-- HTML --><!-- MAIN BOX --> <div class="jw-1-header-box"><!-- GRPHICS --> <div class="jw-2-graphics-bar"> <div class="jw-3-circle-large"></div> </div><!-- NAVIGATION --> <div class="jw-2-nav-bar"> <div class="jw-3-nav-bar-left-section"> <div class="jw-3-button-home"> <a href="http://www.jasonwangart.com">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a> <a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a> <a href="http://www.jasonwangart.com/search/label/reference">references</a> <a href="http://www.jasonwangart.com/p/about-web.html">about & contact</a> </div> <div class="jw-3-social-text-box"> Follow me on </div> <div class="jw-3-social-icon-box"> <div class="jw-opacity-link"> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="24px" height="24px" alt="facebook"/> </a> </div> </div> </div> </div> <!-- DIVIDER --> <div class="jw-2-divider-1"> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> </div><!-- UPDATE --> <div class="jw-2-update-bar"> <div class="jw-3-update-text-box"> Berry Season 9 coming soon! </div> </div> </div> </!doctype>

Hi everyone! I'm using the "Electric Multi-Purpose HTML5" theme from ThemeForest and I have to limit the width to 1000px instead of 1300px which wasn't a problem to change in the css file of course. http://treacle.faceversa.net/assets/custom/css/style.css The boxed layout has changed to 1000px now but some parts like the portfolio do not adjust to it, as it can be seen in the screenshots below. Or here: http://treacle.faceversa.net/ At first I thought I could fix this via breakpoints, but there are only breakpoints for the screen sizes 400, 768 and 992 included. When I bring the browser window to a size of about 1170px everything looks fine (picture below). I would like to know what is influencing these adjustments if it is not a breakpoint. Are there relative css attributes used? Could someone tell me which attributes I would have to change or if there is a global parameter to make these adjustments happen, even if the browser window is bigger than 1170?... I hope its understandable what I would like to do; it would be awesome to get some help; I was working on this for so long now and the author of the template doesn't respond.

On the following page you make recommendation that I feel is not correct. I know in my case it cost me a couple of hours. http://www.w3schools.com/html/html_images.asp Please note the following statements: " We suggest you use the style attribute. " If you are using Bootstrap this will interfere with the responsive nature of the image as the size of the screen changes. I suspect this would apply to other responsive frame works. You should either delete the recommendation or note the effect on responsive frame works.

i don't understand this.Desktop screen resolution: 1280x1024this code: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_large&stacked=hshould do a 4:8 split right? But on my monitor it's 3:9. It sees it like a small device.Also i don't understand the screen width in pixels bcz there are smartphones with QHD resoluton (2560x1440) so would they look at col-lg-* number then ?

Hi guys iv a problem in css and if you help me i really appreciate that i wrote this: <!doctype html><html><head><style type="text/css" >p {border:solid 3px orange;background-color:yellow;color:green;padding:40px;}</style></head><body><p>This is the fist para</p></body></html> ............................................................................... so you can see there is a text in the border but the text is in the left i wana to be at the center and also i want to make left and right width shorter so if you can help me please pm me

If I want to have a horizontal row of text hyperlinks with a set width, is there either a way to get some sort of width property working (on inline elements), or eliminate the carriage return caused by setting the elements to block display? I'm kind of stumped... as the width parameter doesn't work unless the text hyperlink is a block element, and setting it to a block element (to get width to work), causes a carriage return, preventing them from being positioned side to side/horizontally.

Is it possible to increase the width of the audio format?

I've stumbled upon yet another trouble with internet explorer where my images mysteriously becomes 1px by 1px instead of sizing according to it's container like other browsers.I googled the problem and it seems like a lot of people gets this problem when applying heigh:auto; to an image. I accually had this applied but it wasn't solved by removing it.I'll just leave an url for the page here so you can see for yourselves:http://tec.macework.se/catalog/products/components/ Any clues?

hi all, I am trying to let the text in a div set the div width. I have tried... width: 300px; width:auto; and max-width: 300px; min-width: 300px; but it is not working. any help?

I am brand new to WordPress and I'm trying to customize my Prose (Genesis) theme. Specifically, right now I'm having trouble with the widths of the content and sidebar. When I test out widths in inspect element, it looks perfect. So, I add the code to the Custom CSS box under the Genesis settings and it doesn't change. When I go back to inspect element, it doesn't show the dimensions I changed it to, it shows "Width: 100%" Does anyone know what I'm doing wrong? How do I change the widths if it's not by adding CSS?

hello again...i have been thinking, when im making a table, lets say 100% to fill out the div i just gave, it DOES go out.. but when i have like 3 td's to fill out, it keeps pushing to the other site.... i would like it like shown below: PICTURE ATTACHED in the picture you can see however much text you now put in, the boxes still have the same width.. is that a normal css class editing with width?, or some sort of speciel method you guys use?... Hoping you understood what i said, had a little bit trouble explaining about it, lol X)...

Ok- hope someone can help, as this is driving me nuts! I have 2 divs, left-floated within a wrapper div. The rigth side div is set to overflow:auto. The content correctly shows up with a scrollbar at most sizes. However, when I make the page narrower, it falls to the next line, instead of making the div narrower- why? Now, I realise I can set a min page width to stop this from happening, but right now that would have to be set at something like 1300px, which seems too wide to me for a min width. But I don't understand why the right div would fall to a new line instead of just getting narrower? Here's a link to the page if you want to try it out: http://portraits.carissalyn.com/ Here's my css: #header {height:60px;} body,html{min-width:1000px; height:100%; margin:0; padding:0; min-height:600px;overflow-y:hidden;overflow-x:auto; width: 100%; } body { font-family: Arial; background-color: #B8B8B8;}#wrapper {max-width:1200px;background-color: #B8B8B8;min-height:600px;height: 100%; color: #B8B8B8;margin-left: auto;margin-right: auto;white-space: nowrap;} #logo{float:left;color:#fff;width:200px;padding: 75px 15px 15px 0px;}#content {float: left;max-width:80%;color: #000;overflow:auto;} .table {margin:auto; padding: 10px;}.table td { padding: 5px; font-family: arial, sans-serif; text-align:center;color: #cccccc; font-size: 120%;}.table th { padding: 5px; font-family: arial, sans-serif;} and here's the html: <!DOCTYPE html><html lang="en"><head><title>Carissa Lyn Photography</title><link href="site_style.css" rel="stylesheet" type="text/css" media="screen"> </head><body><div id="header"></div><div id="wrapper"> <div id="logo"><img src="images/logo_design.png" alt="logo"></div> <div id="content"> <table class="table"> <tr> <td><img src="images/photo1.jpg" alt="portrait"></td> <td><img src="images/photo2.jpg" alt="portrait"></td><td><img src="images/photo3.jpg" alt="portrait"></td> <td><img src="images/photo4.jpg" alt="portrait"></td><td><img src="images/photo5.jpg" alt="portrait"></td> <td><img src="images/photo6.jpg" alt="portrait"></td> </tr> </table> </div> </div> </body></html>

The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <div id="hNavigation"> </div> <div id="rightLines"> </div> <div id="mainContent"> </div> </div></body> /** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img { border-style: none; text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}

I have a table layout for my picture gallery live example : http://test.repsolhondanc24.co.uk/ When you minimise it or have it on a smaller screen resolution the table does not reduce in size like the other page content section does. Where am I going wrong. I want the table to be all the same size for width and heigh per square alternatively is there a better picture gallery I can use with out using a table (I'm keeping the light-box feature)