New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN: 9781305503922
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 3, Problem 6CP2
Program Plan Intro
To write a CSS style rule to float every div element that has a class name beginning with a column on the left.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
I am having an issue I am not sure what error I have with this code when I execute it.
Here are the instructions for the code:
Column Styles
Next, you’ll format the grid columns. Go to the Column Styles section. Create a style rule to float all div elements whose class value starts with “col-” on the left margin. Set the padding around all such elements to 2%. Finally, apply the Border Box Sizing model to the content of those elements.(Note: Remember to use web extensions to provide support for older browsers.)
In the same section, create style rules for div elements with class names .col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, and .col-3-4 to set their widths to 100%, 50%, 33.33%, 66.67%, 25%, and 75% respectively.
Here is my code:
div[class^="col-"]{
float:left;
padding: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.col-1-1 {width: 100%;}
div.col-1-2 {width: 50%;}
div.col-1-3 {width: 33.33%;}
div.col-2-3 {width:…
Next, set the display of the section element with class ID of tips as a flexbox. Have the content of the flexbox flow in the row direction with row wrapping enabled.
Finally, within the form, add a div element containing a submit button displaying the text Begin Building your Order. (Hint: To code a submit button, use the input element and set its type attribute to "submit". You can also add a value attribute and set its value to the text you want to show on the button. Example: <input type="submit" value="This is text shown on the button">)
Chapter 3 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 3.1 - Prob. 1QCCh. 3.1 - Prob. 2QCCh. 3.1 - Prob. 3QCCh. 3.1 - Prob. 4QCCh. 3.1 - Prob. 5QCCh. 3.1 - Prob. 6QCCh. 3.1 - Prob. 7QCCh. 3.1 - Prob. 8QCCh. 3.1 - Prob. 9QCCh. 3.2 - Prob. 1QC
Ch. 3.2 - Prob. 2QCCh. 3.2 - Prob. 3QCCh. 3.2 - Prob. 4QCCh. 3.2 - Prob. 5QCCh. 3.2 - Prob. 6QCCh. 3.2 - Prob. 7QCCh. 3.2 - Prob. 8QCCh. 3.2 - Prob. 9QCCh. 3.3 - Prob. 1QCCh. 3.3 - Prob. 2QCCh. 3.3 - Prob. 3QCCh. 3.3 - Prob. 4QCCh. 3.3 - Prob. 5QCCh. 3.3 - Prob. 6QCCh. 3.3 - Prob. 7QCCh. 3 - Prob. 1RACh. 3 - Prob. 2RACh. 3 - Prob. 3RACh. 3 - Prob. 4RACh. 3 - Prob. 5RACh. 3 - Prob. 6RACh. 3 - Prob. 7RACh. 3 - Prob. 8RACh. 3 - Prob. 9RACh. 3 - Prob. 10RACh. 3 - Prob. 11RACh. 3 - Prob. 12RACh. 3 - Prob. 13RACh. 3 - Prob. 14RACh. 3 - Prob. 15RACh. 3 - Prob. 16RACh. 3 - Prob. 1CP1Ch. 3 - Prob. 2CP1Ch. 3 - Prob. 3CP1Ch. 3 - Prob. 4CP1Ch. 3 - Prob. 5CP1Ch. 3 - Prob. 6CP1Ch. 3 - Prob. 7CP1Ch. 3 - Prob. 8CP1Ch. 3 - Prob. 9CP1Ch. 3 - Prob. 10CP1Ch. 3 - Prob. 11CP1Ch. 3 - Prob. 12CP1Ch. 3 - Prob. 13CP1Ch. 3 - Prob. 14CP1Ch. 3 - Prob. 15CP1Ch. 3 - Prob. 16CP1Ch. 3 - Prob. 17CP1Ch. 3 - Prob. 18CP1Ch. 3 - Prob. 19CP1Ch. 3 - Prob. 20CP1Ch. 3 - Prob. 1CP2Ch. 3 - Prob. 2CP2Ch. 3 - Prob. 3CP2Ch. 3 - Prob. 4CP2Ch. 3 - Prob. 5CP2Ch. 3 - Prob. 6CP2Ch. 3 - Prob. 7CP2Ch. 3 - Prob. 8CP2Ch. 3 - Prob. 9CP2Ch. 3 - Prob. 10CP2Ch. 3 - Prob. 11CP2Ch. 3 - Prob. 12CP2Ch. 3 - Prob. 13CP2Ch. 3 - Prob. 14CP2Ch. 3 - Prob. 15CP2Ch. 3 - Prob. 16CP2Ch. 3 - Prob. 17CP2Ch. 3 - Prob. 18CP2Ch. 3 - Prob. 19CP2Ch. 3 - Prob. 20CP2Ch. 3 - Prob. 1CP3Ch. 3 - Prob. 2CP3Ch. 3 - Prob. 3CP3Ch. 3 - Prob. 4CP3Ch. 3 - Prob. 5CP3Ch. 3 - Prob. 6CP3Ch. 3 - Prob. 7CP3Ch. 3 - Prob. 8CP3Ch. 3 - Prob. 9CP3Ch. 3 - Prob. 10CP3Ch. 3 - Prob. 11CP3Ch. 3 - Prob. 12CP3Ch. 3 - Prob. 13CP3Ch. 3 - Prob. 14CP3Ch. 3 - Prob. 1CP4Ch. 3 - Prob. 2CP4Ch. 3 - Prob. 3CP4Ch. 3 - Prob. 4CP4Ch. 3 - Prob. 5CP4Ch. 3 - Prob. 6CP4
Knowledge Booster
Similar questions
- You add a style to the start tag for an element, such as a heading or paragraph, using the style attributearrow_forwardWith the frmTutorSearch form still open in Design View, use the Title button to add a title to the form. Replace the default title text with Tutor Information Form. (Hint: Do not include the period.) Save and close the frmTutorSearcharrow_forwardWhen you set the margin left and margin right values to auto, then the element will be positioned at the bottom O right left centerarrow_forward
- Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey ques- tion that asks the user’s year in college (e.g., Freshman). Place the optional survey question in a details element that the user can expand to see the question.arrow_forwardLook at the code given in table1, Write style rules for displaying the flexboxitems in the order shown in Figure 1. Where thewidth and height of each flexbox item is 50px and40px respectively. Each item has a 1px solid black color border and for the background color, the valueof the color is #4682B4,arrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
- New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningNp Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage